We’re currently trying to make our website compliant with the WCAG standards, and right now it fails a few of the requirements. I'm wondering if these are problems with the Kendo grid itself or if you can help us debug something we're doing wrong in our implementation.
One issue was with checkboxes, which don’t seem problematic when I run an audit on the example, but did present issues when we used the same technique to add them in our own grid:
https://www.telerik.com/kendo-react-ui/components/grid/selection/
The other issues were with filters. This is the example that we referenced when adding filters to our code, which was a similar situation (no issues when we audit the example page, but shows issues when we audit our website):
https://www.telerik.com/kendo-react-ui/components/grid/filtering/
This is the breakdown of issues I came across:
Issue 1: Form elements must have
labels - checkboxes
As
I mentioned above, we added checkbox selection to the table following this
example: https://www.telerik.com/kendo-react-ui/components/grid/selection/
However,
we're seeing "form elements must have labels" issues on all of the
checkboxes when we run an audit.
Issue 2: invalid values for
'aria-owns' and 'aria-activedescendant' attributes on filters
This
problem applies to each of the built-in filter dropdowns (I added
filtering following the example linked above).
The attached image named issue2 has a more detailed breakdown of this issue, but TLDR: the validator says the issue is that "the aria-owns attribute must point to an element in the same document"
Issue 3: Form elements must have
labels - inputs for filters
The attached image named issue3 has a more detailed breakdown of this issue.
Issue 4: Form elements must have
labels - filter dropdowns
The attached image named issue4 has a more detailed breakdown of this issue.
-----------------------------------------------------------------------------------------------------------
Things I’ve already
tried:
I tried upgrading Kendo to the latest version via npm (https://www.npmjs.com/package/@progress/kendo-react-grid) to see if the problems were fixed, but my audit showed me the same issues I had seen and more (this time issues with column titles).
Relevant parts of the
code:
I edited out some helpers, handler functions, column setups, etc that don’t
seem relevant. Please let me know if there's something else you want to see!
01.// Handler for when a user selects/unselects a row02.onSelectionChange = (event) => {03.var dataClone = this.cloneObject(this.props.data);04.const ind = dataClone.findIndex(item =>05.item.Key === event.dataItem.Key06.);07.if (ind >= 0) {08.dataClone[ind].selected = !event.dataItem.selected;09.this.props.onUpdateResults(dataClone);10.this.forceUpdate();11.}12.}13. 14.// Handler for when users checks/unchecks "select all" (the checkbox at the top)15.onHeaderSelectionChange = (event) => {16.const checked = event.syntheticEvent.target.checked;17.var dataClone = this.cloneObject(this.props.data);18.dataClone.forEach(item => item.selected = checked);19.this.props.onUpdateResults(dataClone);20.}21. 22.// Render function23.render() {24.return (25.<div ref={this.componentInfo}>26.<Grid27.resizable28.reorderable29.filterable30.sortable31.pageable={{ pageSizes: this.getPageSizeOptions() }}32.groupable33.expandField={globals.EXPAND_FIELD}34.selectedField={globals.CHECKBOX_FIELD}35.onExpandChange={this.onExpandChange}36.onSelectionChange={this.onSelectionChange}37.onHeaderSelectionChange={this.onHeaderSelectionChange}38.data={this.localDisplayData}39.onDataStateChange={this.onDataStateChange}40.{...this.props.dataState}41.>42.<Column43.field={globals.CHECKBOX_FIELD}44.filterable={false} 45.groupable={false}46.headerSelectionValue={47.this.props.data ? this.props.data.findIndex(dataItem => dataItem.selected === false) === -1 : false48.}49.selected={false}50.width='42px'51./>52.</Grid>53.</div>54.);55.}56.}
4 Answers, 1 is accepted
We are aware of all of the mentioned issues and the team is working on them.
I raised the priority of this task.
We apologize for any inconvenience this may have caused you.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
That's good to hear! Thank you for getting back so fast. Is there a Github issue or anything else I could follow to check back on when this is getting rolled into an update?
I have transferred them in a public item in GitHub for better visibility:
https://github.com/telerik/kendo-react/issues/209
Regards,
Stefan
Progress Telerik
Rank 1