fix(Table): 行選択のアクセシビリティ改善

packages/for-ui/src/checkbox/Checkbox.tsx

@@ -21,6 +21,7 @@ const Indicator: FC<{ state: 'default' | 'checked' | 'intermediate'; disabled: b
         intermediate: [`bg-primary-dark-default`, disabled && `bg-primary-dark-disabled`],
       }[state],
     ])}
+    aria-hidden
   >
     {
       {

packages/for-ui/src/radio/Radio.tsx

@@ -17,6 +17,7 @@ const Indicator: FC<{ checked: boolean; disabled: boolean }> = ({ checked, disab
       checked && `border-primary-dark-default border-6`,
       disabled && `border-shade-medium-disabled`,
     ])}
+    aria-hidden
   />
 );
 

packages/for-ui/src/table/Table.tsx

@@ -123,6 +123,7 @@ export const Table = <T extends RowData>({
         minWidth: '20px',
         width: '20px',
         maxWidth: '20px',
+        columnLabel: '一括操作する行の選択',
       },
       header: ({ table }) => (
         <Fragment>
@@ -142,12 +143,12 @@ export const Table = <T extends RowData>({
         </Fragment>
       ),
       cell: ({ row }) => (
-        <TableCell as="th" scope="row">
+        <TableCell as="td" scope="row">
           {!!onSelectRows && (
             <Checkbox
               label={
                 <Text aria-hidden={false} className={fsx(`hidden`)}>
-                  行を選択
+                  この行を選択
                 </Text>
               }
               className={fsx(`flex`)}
@@ -162,7 +163,7 @@ export const Table = <T extends RowData>({
             <Radio
               label={
                 <Text aria-hidden={false} className={fsx(`hidden`)}>
-                  行を選択
+                  この行を選択
                 </Text>
               }
               className={fsx(`flex`)}
@@ -210,6 +211,7 @@ export const Table = <T extends RowData>({
             <TableRow key={headerGroup.id} className="table-row">
               {headerGroup.headers.map((header) => (
                 <SortableTableCellHead
+                  aria-label={header.column.columnDef.meta?.columnLabel}
                   key={header.id}
                   scope="col"
                   nextSortingOrder={header.column.getNextSortingOrder()}

packages/for-ui/types/react-table.d.ts

@@ -7,5 +7,6 @@ declare module '@tanstack/table-core' {
     width?: string
     minWidth?: string
     maxWidth?: string
+    columnLabel?: string
   }
 }