Skip to content

DetailList: Add aria-rowcount and aria-colcount #1667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
micahgodbolt merged 10 commits into from
May 3, 2017
Merged

DetailList: Add aria-rowcount and aria-colcount #1667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
76dafce
added aria-rowindex, colindex, rowcount and colcount properties in ho…
petdun2519 May 1, 2017
da3e312
change file
petdun2519 May 1, 2017
5cc2912
Update users-petdun-gridAriaProperties_2017-05-01-21-52.json
dzearing May 3, 2017
d7052ec
Merge branch 'master' into users/petdun/gridAriaProperties
cschleiden May 3, 2017
70401da
respond to @cschleiden feedback
petdun2519 May 3, 2017
c233a18
Merge branch 'master' into users/petdun/gridAriaProperties
petdun2519 May 3, 2017
1a77a7d
Merge branch 'users/petdun/gridAriaProperties' of https://github.com/…
petdun2519 May 3, 2017
2d51c48
added null guard for adjusted columns
petdun2519 May 3, 2017
7e9cfb6
Merge branch 'master' into users/petdun/gridAriaProperties
micahgodbolt May 3, 2017
cbdd375
Merge branch 'master' into users/petdun/gridAriaProperties
cschleiden May 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/users-petdun-gridAriaProperties_2017-05-01-21-52.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "DetailsList: Added aria properties `aria-colindex`, `aria-rowindex`, `aria-colcount` and `aria-rowcount` to appropriate sub elements.",
"type": "patch"
}
],
"email": "peterdunlop2519@gmail.com"
}
2 changes: 1 addition & 1 deletion packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
data-is-scrollable='false'
aria-label={ ariaLabel }
{ ...(shouldApplyApplicationRole ? { role: 'application' } : {}) }>
<div role='grid' aria-label={ ariaLabelForGrid }>
<div role='grid' aria-label={ ariaLabelForGrid } aria-rowcount={ items ? items.length : 0 } aria-colcount={ adjustedColumns ? adjustedColumns.length : 0 }>
Copy link
Copy Markdown
Member

@cschlechty cschlechty May 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, this one is interesting. we need aria-rowcount to be the # of all items, and not just the length of a partial set.

<div onKeyDown={ this._onHeaderKeyDown } role='presentation'>
{ isHeaderVisible && (
<DetailsHeader
Expand Down
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
data-is-focusable={ true }
data-selection-index={ itemIndex }
data-item-index={ itemIndex }
aria-rowindex={ itemIndex }
data-is-draggable={ isDraggable }
draggable={ isDraggable }
data-automationid='DetailsRow'
Expand Down
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
<div
key={ columnIndex }
role={ column.isRowHeader ? 'rowheader' : 'gridcell' }
aria-colindex={ columnIndex }
className={ css('ms-DetailsRow-cell', styles.cell, column.className, {
'is-multiline': column.isMultiline,
[styles.isMultiline]: column.isMultiline
Expand Down