Fix DetailsList accessibility and add more ARIA hooks

common/changes/office-ui-fabric-react/details-accessibility_2018-06-01-20-15.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: adjusting aria labels and exporting more ariaLabels in `IColumn` to allow for better narrator reading and table scanning.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "tmichon@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx

@@ -161,7 +161,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
               ) }
               aria-labelledby={ `${this._id}-check` }
               onClick={ this._onSelectAllClicked }
-              aria-colindex={ 0 }
+              aria-colindex={ 1 }
               role='columnheader'
             >
               {
@@ -225,7 +225,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                   role='columnheader'
                   aria-sort={ column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' }
                   aria-disabled={ column.columnActionsMode === ColumnActionsMode.disabled }
-                  aria-colindex={ (showCheckbox ? 1 : 0) + columnIndex }
+                  aria-colindex={ (showCheckbox ? 2 : 1) + columnIndex }
                   className={ css(
                     'ms-DetailsHeader-cell',
                     styles.cell,
@@ -273,19 +273,28 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                           </span>
 
                           { column.isFiltered && (
-                            <Icon className={ styles.nearIcon } iconName='Filter' />
+                            <Icon ariaLabel={ column.filterAriaLabel } className={ styles.nearIcon } iconName='Filter' />
                           ) }
 
                           { column.isSorted && (
-                            <Icon className={ css(styles.nearIcon, styles.sortIcon) } iconName={ column.isSortedDescending ? 'SortDown' : 'SortUp' } />
+                            <Icon
+                              ariaLabel={
+                                column.isSortedDescending ?
+                                  column.sortDescendingAriaLabel :
+                                  column.sortAscendingAriaLabel
+                              }
+                              className={ css(styles.nearIcon, styles.sortIcon) }
+                              iconName={ column.isSortedDescending ? 'SortDown' : 'SortUp' }
+                            />
                           ) }
 
                           { column.isGrouped && (
-                            <Icon className={ styles.nearIcon } iconName='GroupedDescending' />
+                            <Icon ariaLabel={ column.groupAriaLabel } className={ styles.nearIcon } iconName='GroupedDescending' />
                           ) }
 
                           { column.columnActionsMode === ColumnActionsMode.hasDropdown && !column.isIconOnly && (
                             <Icon
+                              aria-hidden={ true }
                               className={ css('ms-DetailsHeader-filterChevron', styles.filterChevron) }
                               iconName='ChevronDown'
                             />

packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts

@@ -389,6 +389,23 @@ export interface IColumn {
   * If set, will add additional LTR padding-right to column and cells.
   */
   isPadded?: boolean;
+
+  /**
+   * ARIA label for the sort order of this column when sorted ascending.
+   */
+  sortAscendingAriaLabel?: string;
+  /**
+   * ARIA label for the sort order of this column when sorted descending.
+   */
+  sortDescendingAriaLabel?: string;
+  /**
+   * ARIA label for the status of this column when grouped.
+   */
+  groupAriaLabel?: string;
+  /**
+   * ARIA label for the status of this column when filtered.
+   */
+  filterAriaLabel?: string;
 }
 
 /**

packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx

@@ -263,7 +263,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
         { showCheckbox && (
           <div
             role='gridcell'
-            aria-colindex={ 0 }
+            aria-colindex={ 1 }
             data-selection-toggle={ true }
             className={ css('ms-DetailsRow-cell', 'ms-DetailsRow-cellCheck', checkStyles.owner, styles.cell, styles.checkCell, checkboxCellClassName) }
           >

packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx

@@ -47,7 +47,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
           <div
             key={ columnIndex }
             role={ column.isRowHeader ? 'rowheader' : 'gridcell' }
-            aria-colindex={ columnIndex + columnStartIndex }
+            aria-colindex={ columnIndex + columnStartIndex + 1 }
             className={ css('ms-DetailsRow-cell', styles.cell, column.className,
               column.isMultiline && 'is-multiline',
               column.isRowHeader && styles.isRowHeader,

packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`DetailsHeader can render 1`] = `
   role="row"
 >
   <div
-    aria-colindex={0}
+    aria-colindex={1}
     aria-labelledby="header0-check"
     className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
     onClick={[Function]}
@@ -130,7 +130,7 @@ exports[`DetailsHeader can render 1`] = `
     </span>
   </div>
   <div
-    aria-colindex={1}
+    aria-colindex={2}
     aria-disabled={false}
     aria-sort="none"
     className="ms-DetailsHeader-cell is-actionable undefined"
@@ -178,7 +178,7 @@ exports[`DetailsHeader can render 1`] = `
     role="button"
   />
   <div
-    aria-colindex={2}
+    aria-colindex={3}
     aria-disabled={false}
     aria-sort="none"
     className="ms-DetailsHeader-cell is-actionable undefined"

packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`DetailsList renders List correctly 1`] = `
           role="row"
         >
           <div
-            aria-colindex={0}
+            aria-colindex={1}
             aria-labelledby="header0-check"
             className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
             onClick={[Function]}
@@ -156,7 +156,7 @@ exports[`DetailsList renders List correctly 1`] = `
             </span>
           </div>
           <div
-            aria-colindex={1}
+            aria-colindex={2}
             aria-disabled={false}
             aria-sort="none"
             className="ms-DetailsHeader-cell is-actionable undefined"