diff --git a/common/changes/office-ui-fabric-react/details-accessibility_2018-06-01-20-15.json b/common/changes/office-ui-fabric-react/details-accessibility_2018-06-01-20-15.json new file mode 100644 index 00000000000000..b7dd7925aa2551 --- /dev/null +++ b/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" +} diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx index 25a76aa132e933..50028fbcf8915b 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx @@ -161,7 +161,7 @@ export class DetailsHeader extends BaseComponent { @@ -225,7 +225,7 @@ export class DetailsHeader extends BaseComponent { column.isFiltered && ( - + ) } { column.isSorted && ( - + ) } { column.isGrouped && ( - + ) } { column.columnActionsMode === ColumnActionsMode.hasDropdown && !column.isIconOnly && ( diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts index 9095cef36ec758..015f976b1b271b 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts +++ b/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; } /** diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx index a0364df78a7653..1edb14cd70fcb0 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx @@ -263,7 +263,7 @@ export class DetailsRow extends BaseComponent diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx index 7a92d08978315d..fcde339210e09f 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx @@ -47,7 +47,7 @@ export class DetailsRowFields extends BaseComponent