-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
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.
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
Fix Table aria attributes #1208
Fix Table aria attributes #1208
Conversation
Add aria attributes, following https://www.w3.org/TR/2018/NOTE-wai-aria-practices-1.1-20180726/examples/grid/dataGrids.html#rps_label
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working on fixing the a11y issue I filed!
I think you'd also need to update Grid
as well (the original bug was referencing the Grid
component).
// Note that we specify :rowCount, :scrollbarWidth, :sortBy, and :sortDirection as properties on Grid even though these have nothing to do with Grid. | ||
// This is done because Grid is a pure component and won't update unless its properties or state has changed. | ||
// Any property that should trigger a re-render of Grid then is specified here to avoid a stale display. | ||
return ( | ||
<div | ||
aria-label={this.props['aria-label']} | ||
aria-labelledby={this.props['aria-labelledby']} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This prop isn't in the list of props - seems like it needs to be added
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I add them in propTypes definition
source/Table/Table.js
Outdated
className={cn('ReactVirtualized__Table', className)} | ||
id={id} | ||
role="grid" | ||
tabIndex="0" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed that there's a tabIndex
prop that's never used in this component, though I also don't think that value should ever be above 0 anyway so it's probably better that it's not being used. I wonder if that prop should just be removed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 I was testing something, adding it to the focus flow but i was a misundertanding of how SR works. I remove it.
source/Table/Table.js
Outdated
@@ -378,19 +378,26 @@ export default class Table extends React.PureComponent { | |||
}; | |||
}); | |||
|
|||
const columns = this._getHeaderColumns(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This number won't be accurate if disableHeader
is set to true
. Is it possible to calculate the number of columns a different way?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point, I'll just get the number of children
@@ -8,7 +8,7 @@ export default function defaultHeaderRowRenderer({ | |||
style, | |||
}: HeaderRowRendererParams) { | |||
return ( | |||
<div className={className} role="row" style={style}> | |||
<div className={className} role="rowheader" style={style}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
role="row"
was correct here. rowheader
is for the cell that represents the heading for a row, if it exists.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh my bad, bad understanding of the value. Thanks
About the Grid component, it's something quite generic. I'm not sure about how we could do that. Adding an extra div to wrap the rows will make it not compatible with the Table implementation. For now there is a workaround, passing your own cellRenderer (that's what Table does). Or use Table with disableHeader. |
This looks good to me and I could really use this. Can we merge this PR in? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome! thanks for contributing! I release a minor version within a week or so :)
Thanks for merging it in! When can we expect a new release? |
@koenoe hopefully this weekend! |
* bvaughn/master: (54 commits) Update version and changelog for 9.21.0 release (bvaughn#1252) chore: update lockfile Update ci badge (bvaughn#1227) Allow users to override default table row styles (bvaughn#1175) Add onColumnClick to Table (bvaughn#1207) remove unused variable in Masonry.example.js (bvaughn#1218) Fix Table aria attributes (bvaughn#1208) Fix typo in CellMeasurer.DynamicHeightTableColumn.example.js (bvaughn#1190) Update usingAutoSizer.md (bvaughn#1186) Add an extra check for an e.target.className.indexOf function (bvaughn#1210) Fix broken Slack badge image (bvaughn#1205) docs(CellMeasurer): fix `import` statement (bvaughn#1187) Added new friend (bvaughn#1197) Fix createMultiSort bug (bvaughn#1051) adding new usecase example and fix some typos (bvaughn#1168) Updating version to 9.20.1 Update changelog for the 9.20.1 release (bvaughn#1167) Prevent early debounceScrollEndedCallback when there is a slow render (bvaughn#1141) removing sideEffects (bvaughn#1163) fix for bvaughn#998 with test cases (bvaughn#1154) ...
What is the problem this PR is trying to solve?
#1199 explain accessibility issues. It refers to http://w3c.github.io/aria-practices/#grid.
This PR try to solve the accessibility on Table html.
Current markup is
What is the chosen solution to this problem?
Follow https://www.w3.org/TR/2018/NOTE-wai-aria-practices-1.1-20180726/examples/grid/dataGrids.html
New markup is
Before submitting a pull request, please complete the following checklist:
npm test
) all passnpm run prettier
).npm run typecheck
).edit:
closes: #1199