Accessibility for MRT_SelectCheckbox (a.k.a Checkbox, Radio, Switch)

[ramil-thrive]

I am using the table row selection feature. However, I have come across an accessibility issue that I believe is worth discussing and addressing. The primary concern revolves around ensuring that our UI components are usable by everyone, including those who rely on assistive technologies like screen readers.

As per the current implementation, the MRT_SelectCheckboxProps interface only allows for three properties:

interface MRT_SelectCheckboxProps<TData extends Record<string, any> = {}> {
  row?: MRT_Row<TData>;
  selectAll?: boolean;
  table: MRT_TableInstance<TData>;
}

The limitation I'm encountering is that there's no provision to pass the aria-label attribute directly to the MRT_SelectCheckbox, making it challenging to communicate the action's context to screen reader users.

To enhance the accessibility aspect, I'm proposing an idea where we can build the aria-label based on the data contained in the row. By doing this, when a user selects a specific row, screen readers can provide immediate feedback regarding the chosen row's data. This would make the row selection feature not only intuitive but also fully accessible.

I would appreciate thoughts on how we can extend the MRT_SelectCheckboxProps to support this feature or any alternative solutions to improve accessibility in this context.

Example usage:

'mrt-row-select': {
  Cell: ({ row, table }: CellProps<TRecord>) => (
    <MRT_SelectCheckbox
      row={row}
      table={table}
      aria-label={map(row.original, (value, key) => `${startCase(key)}: ${value}`).join(' - ')}
    />
  )}