feat: ThCheckboxのラベルが表の読み上げに影響しないようにThのアクセシビリティネームを上書き

kufu · Dec 27, 2023 · 52bf4f7 · 52bf4f7
1 parent 7e32e5b
commit 52bf4f7
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/components/Table/ThCheckbox.tsx b/src/components/Table/ThCheckbox.tsx
@@ -11,19 +11,22 @@ import { Th as shrTh } from './Th'
 import type { DecoratorsType } from '../../types'
 
 type Props = {
-  decorators?: DecoratorsType<'checkAllInvisibleLabel'>
+  decorators?: DecoratorsType<'checkAllInvisibleLabel'> & DecoratorsType<'checkColumnName'>
 }
 
 const CHECK_ALL_INVISIBLE_LABEL = 'すべての行を選択'
+const CHECK_COLUMN_NAME = '選択'
 
 export const ThCheckbox = forwardRef<HTMLInputElement, CheckBoxProps & Props>(
   ({ decorators, className, ...others }, ref) => {
     const theme = useTheme()
     const checkAllInvisibleLabel =
       decorators?.checkAllInvisibleLabel?.(CHECK_ALL_INVISIBLE_LABEL) || CHECK_ALL_INVISIBLE_LABEL
+    const checkColumnName = decorators?.checkColumnName?.(CHECK_COLUMN_NAME) || CHECK_COLUMN_NAME
+
     return (
       // Th に必要な属性やイベントは不要
-      <Th themes={theme} className={className}>
+      <Th themes={theme} className={className} aria-label={checkColumnName}>
         <Label>
           <Balloon horizontal="left" vertical="middle">
             <p className="shr-p-0.5">{checkAllInvisibleLabel}</p>
@@ -44,11 +47,23 @@ const Th = styled(shrTh)<{ themes: Theme }>`
     width: ${fontSize.M};
   `}
 `
+
 const Label = styled(Center).attrs({ forwardedAs: 'label', verticalCentering: true })`
   position: absolute;
   inset: 0;
 
   &:not(:has([disabled])) {
     cursor: pointer;
   }
+
+  .smarthr-ui-Balloon {
+    position: absolute;
+    left: 36px;
+    transform: translate(0, 1px);
+    display: none;
+  }
+
+  &:has(input:hover, input:focus, input:focus-visible) > .smarthr-ui-Balloon {
+    display: block;
+  }
 `