Declined
Last Updated: 22 Jun 2023 08:24 by ADMIN
eDAD
Created on: 16 Jun 2023 11:15
Category: Kendo UI for Angular
Type: Bug Report
0
Accessibility bug - Ensures every ARIA input field has an accessible name

Test Environment:
Browser: Edge browser Version 114.0.1823.51 (Official build) (64-bit)
OS: Windows 22H2

Steps to Reproduce:

  1. Open the URL - https://angular-kendo-dropdown-list.stackblitz.io/ in edge browser.
  2. Press Tab key and navigate to “Select gender” dropdown.
  3. Run fastpass in Accessibility insights for web extension.


Actual Result: Fastpass run shows "Ensures every ARIA input field has an accessible name" error for “Select gender” dropdown.

Expected Result: Every ARIA input field has an accessible name
Fix ONE of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty

Element has no title attribute

 

Attached Files:
1 comment
ADMIN
Martin
Posted on: 22 Jun 2023 08:24

Hi eDAD Team,

This is expected behavior when the input control doesn't have an assigned label. Here is the updated example with a label:

https://stackblitz.com/edit/angular-xdv1ti

The aria-labelledby attribute, which is added to the <kendo-dropdownlist> component when Kendo Angular Label component is used, is designed to work as a fallback mechanism to associate the label with the component for those cases where the component doesn't use a form control element ( such as input, textarea, select, button).

I hope this sheds some light on the case.

Regards,
Martin
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.