Digital Accessibility Issues when using kendo grid in angular

2 Answers 186 Views

Accessibility Grid

Vishnu Priyanka asked on 26 Mar 2024, 07:40 PM | edited on 26 Mar 2024, 07:44 PM

Hi there,

Recently we started working on accessibility issues on angular 15 app Currently we are using the below version for kendo grid.

"@progress/kendo-angular-grid": "^4.7.0",

And we are facing some issues from kendo grid and wanted to check if these get sorted out if the kendo grid version is updated to higher versions. And if so, please suggest the version no..
Please find the attached issues.

---------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------
Please check the issues and let us know how I can sort out my issues.

2 Answers, 1 is accepted

answered on 29 Mar 2024, 12:49 PM

Hi Vishnu,

Thank you for the provided screenshots.

Version 4.7.0 of the Grid is outdated and since then the component has received many bug fixes, features, and improvements. Updating the versions is highly recommended:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

All Grid demos on the website use the latest version of the components and can be opened inside a new window where the Grid can be tested. Recently we updated all Kendo components to comply with the latest WCAG 2.2 accessibility specification aiming to comply with the axeDevTools. Here is a snapshot of the Grid tested against axeDevTools:

The .k-i-seek-e class is no longer used and instead of span, now the Grid uses a button with the corresponding aria-label:

Regarding the element with .k-grid.k-grid-aria-root class and role="grid", the markup is the same. The developer might need to change the role to presentation and remove the aria-rowcount and aria-colcount attributes with custom JavaScript logic.

Element <colgroup> has no role attribute set:

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

answered on 11 Jun 2024, 02:57 PM | edited on 11 Jun 2024, 02:59 PM

Hello Martin / Team,

As suggested I've upgraded the kendo grid with below versions to fix DA issues. But after upgrading, some styling issues are occurred. Can you please let me know how I can fix this issue. Attaching some screen shots of package.json and grid before and after upgrading for reference.

Here are the dependencies and devDependencies after upgrade in my package.json

"dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/localize": "^15.0.0",
    "@angular/material": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@microsoft/signalr": "^6.0.2",
    "@ngrx/effects": "^15.0.0",
    "@ngrx/entity": "^15.0.0",
    "@ngrx/store": "^15.0.0",
    "@ngrx/store-devtools": "^15.0.0",
    "@pnc/imaging": "^15.3.1",
    "@progress/kendo-angular-buttons": "^15.5.0",
    "@progress/kendo-angular-charts": "^15.5.0",
    "@progress/kendo-angular-common": "^15.5.0",
    "@progress/kendo-angular-dateinputs": "^15.5.0",
    "@progress/kendo-angular-dialog": "^15.5.0",
    "@progress/kendo-angular-dropdowns": "^15.5.0",
    "@progress/kendo-angular-excel-export": "^15.5.0",
    "@progress/kendo-angular-grid": "^15.5.0",
    "@progress/kendo-angular-icons": "^15.5.0",
    "@progress/kendo-angular-inputs": "^15.5.0",
    "@progress/kendo-angular-intl": "^15.5.0",
    "@progress/kendo-angular-l10n": "^15.5.0",
    "@progress/kendo-angular-label": "^15.5.0",
    "@progress/kendo-angular-layout": "^15.5.0",
    "@progress/kendo-angular-pdf-export": "^15.5.0",
    "@progress/kendo-angular-popup": "^15.5.0",
    "@progress/kendo-angular-progressbar": "^15.5.0",
    "@progress/kendo-angular-treeview": "^15.5.0",
    "@progress/kendo-angular-utils": "^15.5.0",
    "@progress/kendo-angular-navigation": "^15.5.0",
    "@progress/kendo-data-query": "^1.5.3",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^1.5.0",
    "@progress/kendo-theme-bootstrap": "^6.3.0",
    "@schematics/angular": "^15.0.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
    "eslint-plugin-standard": "^5.0.0",
    "force": "0.0.3",
    "karma-junit-reporter": "^2.0.1",
    "lint": "^0.8.19",
    "moment": "^2.24.0",
    "prismjs": "^1.27.0",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.0.0",
    "rxjs-tslint-rules": "^4.34.8",
    "sch": "^0.5.2",
    "tslib": "^2.0.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/language-service": "^15.0.0",
    "@progress/kendo-angular-pager": "^15.5.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/jest": "^29.5.1",
    "@types/node": "^16.18.0",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "codelyzer": "^6.0.0",
    "eslint": "^8.53.0",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-no-null": "^1.0.2",
    "jasmine-core": "~4.0.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.2.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "npm-run-all": "^4.1.5",
    "pdfjs-dist": "^2.3.200",
    "protractor": "~7.0.0",
    "signalr": "^2.4.1",
    "ts-node": "^5.0.1",
    "tslint": "^6.1.3",
    "tslint-to-eslint-config": "^2.14.0",
    "typescript": "4.9.5"
  }

After upgrade

Package.json before upgrading kendo grid

"dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/localize": "^15.0.0",
    "@angular/material": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@microsoft/signalr": "^6.0.2",
    "@ngrx/effects": "^15.0.0",
    "@ngrx/entity": "^15.0.0",
    "@ngrx/store": "^15.0.0",
    "@ngrx/store-devtools": "^15.0.0",
    "@pnc/imaging": "^15.3.1",
    "@progress/kendo-angular-common": "^1.2.2",
    "@progress/kendo-angular-dateinputs": "^4.2.2",
    "@progress/kendo-angular-excel-export": "^3.1.3",
    "@progress/kendo-angular-intl": "^2.0.1",
    "@progress/kendo-angular-l10n": "^2.0.1",
    "@progress/kendo-angular-pdf-export": "^2.0.3",
    "@progress/kendo-angular-popup": "^3.0.5",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-svg-icons": "^1.5.0",
    "@progress/kendo-theme-default": "^6.2.0",
    "@schematics/angular": "^15.0.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
    "eslint-plugin-standard": "^5.0.0",
    "force": "0.0.3",
    "karma-junit-reporter": "^2.0.1",
    "lint": "^0.8.19",
    "moment": "^2.24.0",
    "prismjs": "^1.27.0",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.0.0",
    "rxjs-tslint-rules": "^4.34.8",
    "sch": "^0.5.2",
    "tslib": "^2.0.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/language-service": "^15.0.0",
    "@progress/kendo-angular-buttons": "^5.5.0",
    "@progress/kendo-angular-dialog": "^4.1.3",
    "@progress/kendo-angular-dropdowns": "^4.2.6",
    "@progress/kendo-angular-grid": "^4.7.0",
    "@progress/kendo-angular-inputs": "^6.5.0",
    "@progress/kendo-angular-pager": "^1.0.0",
    "@progress/kendo-angular-treeview": "^4.1.2",
    "@progress/kendo-data-query": "^1.5.3",
    "@progress/kendo-theme-default": "^4.15.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/jest": "^29.5.1",
    "@types/node": "^16.18.0",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "codelyzer": "^6.0.0",
    "eslint": "^8.53.0",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-no-null": "^1.0.2",
    "jasmine-core": "~4.0.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.2.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "npm-run-all": "^4.1.5",
    "pdfjs-dist": "^2.3.200",
    "protractor": "~7.0.0",
    "signalr": "^2.4.1",
    "ts-node": "^5.0.1",
    "tslint": "^6.1.3",
    "tslint-to-eslint-config": "^2.14.0",
    "typescript": "4.9.5"
  }