fix(#2132): TableView accessibility review issues (#2134)

Michael Jordan · web-flow · commit d6772b66323c · 2021-07-26T16:55:31.000-07:00
diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
@@ -22,6 +22,7 @@ import Anatomy from './TableAnatomy.svg';
 
 ```jsx import
 import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableHeaderRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
+import VisuallyHidden from '@react-aria/visually-hidden';
 ```
 
 ---
@@ -400,10 +401,20 @@ function TableSelectAllCell({column, state}) {
     <th
       {...columnHeaderProps}
       ref={ref}>
+      {
+        /* 
+          In single selection mode, the checkbox will be hidden. 
+          So to avoid leaving a column header with no accessible content, 
+          use a VisuallyHidden component to include the aria-label from the checkbox, 
+          which for single selection will be "Select."
+        */
+        isSingleSelectionMode &&
+        <VisuallyHidden>{inputProps['aria-label']}</VisuallyHidden>
+      }
       <input
         {...inputProps}
         ref={inputRef}
-        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
+        style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined} />
     </th>
   );
 }
diff --git a/packages/@react-aria/table/intl/ar-AE.json b/packages/@react-aria/table/intl/ar-AE.json
@@ -0,0 +1,4 @@
+{
+  "select": "يحدد",
+  "selectAll": "تحديد الكل"
+}
diff --git a/packages/@react-aria/table/intl/bg-BG.json b/packages/@react-aria/table/intl/bg-BG.json
@@ -0,0 +1,4 @@
+{
+  "select": "Избирам",
+  "selectAll": "Избери всички"
+}
diff --git a/packages/@react-aria/table/intl/cs-CZ.json b/packages/@react-aria/table/intl/cs-CZ.json
@@ -0,0 +1,4 @@
+{
+  "select": "Vybrat",
+  "selectAll": "Vybrat vše"
+}
diff --git a/packages/@react-aria/table/intl/da-DK.json b/packages/@react-aria/table/intl/da-DK.json
@@ -0,0 +1,4 @@
+{
+  "select": "Vælg",
+  "selectAll": "Vælg alle"
+}
diff --git a/packages/@react-aria/table/intl/de-DE.json b/packages/@react-aria/table/intl/de-DE.json
@@ -0,0 +1,4 @@
+{
+  "select": "Auswählen",
+  "selectAll": "Alles auswählen"
+}
diff --git a/packages/@react-aria/table/intl/el-GR.json b/packages/@react-aria/table/intl/el-GR.json
@@ -0,0 +1,4 @@
+{
+    "select": "Επιλέγω",
+    "selectAll": "Επιλογή όλων"
+}
diff --git a/packages/@react-aria/table/intl/en-US.json b/packages/@react-aria/table/intl/en-US.json
@@ -1,4 +1,6 @@
 {
+  "select": "Select",
+  "selectAll": "Select All",
   "sortable": "sortable column",
   "ascending": "ascending",
   "descending": "descending",
diff --git a/packages/@react-aria/table/intl/es-ES.json b/packages/@react-aria/table/intl/es-ES.json
@@ -0,0 +1,4 @@
+{
+  "select": "Seleccionar",
+  "selectAll": "Seleccionar todos"
+}
diff --git a/packages/@react-aria/table/intl/et-EE.json b/packages/@react-aria/table/intl/et-EE.json
@@ -0,0 +1,4 @@
+{
+  "select": "Vali",
+  "selectAll": "Vali kõik"
+}
diff --git a/packages/@react-aria/table/intl/fi-FI.json b/packages/@react-aria/table/intl/fi-FI.json
@@ -0,0 +1,4 @@
+{
+  "select": "Valitse",
+  "selectAll": "Valitse kaikki"
+}
diff --git a/packages/@react-aria/table/intl/fr-FR.json b/packages/@react-aria/table/intl/fr-FR.json
@@ -0,0 +1,4 @@
+{
+  "select": "Sélectionner",
+  "selectAll": "Sélectionner tout"
+}
diff --git a/packages/@react-aria/table/intl/he-IL.json b/packages/@react-aria/table/intl/he-IL.json
@@ -0,0 +1,4 @@
+{
+  "select": "בחר",
+  "selectAll": "בחר הכל"
+}
diff --git a/packages/@react-aria/table/intl/hr-HR.json b/packages/@react-aria/table/intl/hr-HR.json
@@ -0,0 +1,4 @@
+{
+  "select": "Odaberi",
+  "selectAll": "Odaberi sve"
+}
diff --git a/packages/@react-aria/table/intl/hu-HU.json b/packages/@react-aria/table/intl/hu-HU.json
@@ -0,0 +1,4 @@
+{
+  "select": "Kijelölés",
+  "selectAll": "Összes kijelölése"
+}
diff --git a/packages/@react-aria/table/intl/it-IT.json b/packages/@react-aria/table/intl/it-IT.json
@@ -0,0 +1,4 @@
+{
+  "select": "Seleziona",
+  "selectAll": "Seleziona tutto"
+}
diff --git a/packages/@react-aria/table/intl/ja-JP.json b/packages/@react-aria/table/intl/ja-JP.json
@@ -0,0 +1,4 @@
+{
+  "select": "選択",
+  "selectAll": "すべてを選択"
+}
diff --git a/packages/@react-aria/table/intl/ko-KR.json b/packages/@react-aria/table/intl/ko-KR.json
@@ -0,0 +1,4 @@
+{
+  "select": "선택",
+  "selectAll": "모두 선택"
+}
diff --git a/packages/@react-aria/table/intl/lt-LT.json b/packages/@react-aria/table/intl/lt-LT.json
@@ -0,0 +1,4 @@
+{
+  "select": "Žymėti",
+  "selectAll": "Žymėti viską"
+}
diff --git a/packages/@react-aria/table/intl/lv-LV.json b/packages/@react-aria/table/intl/lv-LV.json
@@ -0,0 +1,4 @@
+{
+  "select": "Atlasīt",
+  "selectAll": "Atlasīt visus"
+}
diff --git a/packages/@react-aria/table/intl/nb-NO.json b/packages/@react-aria/table/intl/nb-NO.json
@@ -0,0 +1,4 @@
+{
+  "select": "Velg",
+  "selectAll": "Velg alle"
+}
diff --git a/packages/@react-aria/table/intl/nl-NL.json b/packages/@react-aria/table/intl/nl-NL.json
@@ -0,0 +1,4 @@
+{
+  "select": "Selecteren",
+  "selectAll": "Alles selecteren"
+}
diff --git a/packages/@react-aria/table/intl/pl-PL.json b/packages/@react-aria/table/intl/pl-PL.json
@@ -0,0 +1,4 @@
+{
+  "select": "Zaznacz",
+  "selectAll": "Zaznacz wszystko"
+}
diff --git a/packages/@react-aria/table/intl/pt-BR.json b/packages/@react-aria/table/intl/pt-BR.json
@@ -0,0 +1,4 @@
+{
+  "select": "Selecionar",
+  "selectAll": "Selecionar tudo"
+}
diff --git a/packages/@react-aria/table/intl/pt-PT.json b/packages/@react-aria/table/intl/pt-PT.json
@@ -0,0 +1,4 @@
+{
+  "select": "Selecionar",
+  "selectAll": "Selecionar tudo"
+}
diff --git a/packages/@react-aria/table/intl/ro-RO.json b/packages/@react-aria/table/intl/ro-RO.json
@@ -0,0 +1,4 @@
+{
+  "select": "Selectați",
+  "selectAll": "Selectați tot"
+}
diff --git a/packages/@react-aria/table/intl/ru-RU.json b/packages/@react-aria/table/intl/ru-RU.json
@@ -0,0 +1,4 @@
+{
+  "select": "Выбрать",
+  "selectAll": "Выбрать все"
+}
diff --git a/packages/@react-aria/table/intl/sk-SK.json b/packages/@react-aria/table/intl/sk-SK.json
@@ -0,0 +1,4 @@
+{
+  "select": "Vybrať",
+  "selectAll": "Vybrať všetko"
+}
diff --git a/packages/@react-aria/table/intl/sl-SI.json b/packages/@react-aria/table/intl/sl-SI.json
@@ -0,0 +1,4 @@
+{
+  "select": "Izberi",
+  "selectAll": "Izberi vse"
+}
diff --git a/packages/@react-aria/table/intl/sr-SP.json b/packages/@react-aria/table/intl/sr-SP.json
@@ -0,0 +1,4 @@
+{
+  "select": "Izaberi",
+  "selectAll": "Izaberi sve"
+}
diff --git a/packages/@react-aria/table/intl/sv-SE.json b/packages/@react-aria/table/intl/sv-SE.json
@@ -0,0 +1,4 @@
+{
+  "select": "Markera",
+  "selectAll": "Markera allt"
+}
diff --git a/packages/@react-aria/table/intl/tr-TR.json b/packages/@react-aria/table/intl/tr-TR.json
@@ -0,0 +1,4 @@
+{
+  "select": "Seç",
+  "selectAll": "Tümünü Seç"
+}
diff --git a/packages/@react-aria/table/intl/uk-UA.json b/packages/@react-aria/table/intl/uk-UA.json
@@ -0,0 +1,4 @@
+{
+  "select": "Вибрати",
+  "selectAll": "Вибрати все"
+}
diff --git a/packages/@react-aria/table/intl/zh-CN.json b/packages/@react-aria/table/intl/zh-CN.json
@@ -0,0 +1,4 @@
+{
+  "select": "选择",
+  "selectAll": "全选"
+}
diff --git a/packages/@react-aria/table/intl/zh-TW.json b/packages/@react-aria/table/intl/zh-TW.json
@@ -0,0 +1,4 @@
+{
+  "select": "選取",
+  "selectAll": "全選"
+}
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -82,7 +82,6 @@ export function useTableColumnHeader<T>(props: ColumnHeaderProps, state: TableSt
       role: 'columnheader',
       id: getColumnHeaderId(state, node.key),
       'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,
-      'aria-disabled': isSelectionCellDisabled || undefined,
       'aria-sort': ariaSort
     }
   };
diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
@@ -12,9 +12,12 @@
 
 import {AriaCheckboxProps} from '@react-types/checkbox';
 import {getRowLabelledBy} from './utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {Key} from 'react';
 import {TableState} from '@react-stately/table';
 import {useId} from '@react-aria/utils';
+import {useMessageFormatter} from '@react-aria/i18n';
 
 interface SelectionCheckboxProps {
   /** A unique key for the checkbox. */
@@ -46,10 +49,12 @@ export function useTableSelectionCheckbox<T>(props: SelectionCheckboxProps, stat
 
   let onChange = () => manager.select(key);
 
+  const formatMessage = useMessageFormatter(intlMessages);
+
   return {
     checkboxProps: {
       id: checkboxId,
-      'aria-label': 'Select',
+      'aria-label': formatMessage('select'),
       'aria-labelledby': `${checkboxId} ${getRowLabelledBy(state, key)}`,
       isSelected,
       isDisabled: isDisabled || manager.selectionMode === 'none',
@@ -65,9 +70,11 @@ export function useTableSelectionCheckbox<T>(props: SelectionCheckboxProps, stat
  */
 export function useTableSelectAllCheckbox<T>(state: TableState<T>): SelectAllCheckboxAria {
   let {isEmpty, isSelectAll, selectionMode} = state.selectionManager;
+  const formatMessage = useMessageFormatter(intlMessages);
+
   return {
     checkboxProps: {
-      'aria-label': 'Select All',
+      'aria-label': formatMessage(selectionMode === 'single' ? 'select' : 'selectAll'),
       isSelected: isSelectAll,
       isDisabled: selectionMode !== 'multiple',
       isIndeterminate: !isEmpty && !isSelectAll,
diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -712,7 +712,7 @@ function TableExample(props) {
           (<Row key={item.id}>
             {key =>
               key === 'addInfo'
-              ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
+              ? <Cell><ActionButton aria-label="Add Info" isQuiet><Add /></ActionButton></Cell>
               : <Cell>{item[key]}</Cell>
             }
           </Row>)
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
@@ -461,11 +461,21 @@ function TableSelectAllCell({column}) {
             }
           )
         }>
+        {
+          /* 
+            In single selection mode, the checkbox will be hidden. 
+            So to avoid leaving a column header with no accessible content, 
+            we use a VisuallyHidden component to include the aria-label from the checkbox, 
+            which for single selection will be "Select."
+          */
+          isSingleSelectionMode &&
+          <VisuallyHidden>{checkboxProps['aria-label']}</VisuallyHidden>
+        }
         <Checkbox
           {...checkboxProps}
           isDisabled={isSingleSelectionMode}
           isEmphasized
-          UNSAFE_style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}}
+          UNSAFE_style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined}
           UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} />
       </div>
     </FocusRing>
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
diff --git a/packages/@react-spectrum/table/test/Table.test.js b/packages/@react-spectrum/table/test/Table.test.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "select": "يحدد",
 +  "selectAll": "تحديد الكل"
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`{`
	`2`	`+ "select": "Select",`
	`3`	`+ "selectAll": "Select All",`
`2`	`4`	`"sortable": "sortable column",`
`3`	`5`	`"ascending": "ascending",`
`4`	`6`	`"descending": "descending",`