search

bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

Accessibility issue in date picker widget, toolbar buttons should not have `role="presentation"` #9905

Closed ghulamghousdev closed 1 month ago

ghulamghousdev commented 2 months ago

Forum post

Note:

The issue is not reproducible with Mac's Voice over. But we should not have role="presentation" as it hides the accessibility semantics from the element. Read more about it here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role

Hi reaching out from Certinia (formerly FF). We have spotted an accessibility issue occurring on the date picker widget.

The SR does not announce the role of the buttons (Previous year, previous month, year, next month, next year) used in the toolbar of the date picker, making it difficult for the SR users to understand the use of these interactive elements. This seems to be happening for the use of role="presentation" in the buttons elements. When used role="presentation" it removes the semantic meaning of the element placed. In this case is removing the semantic meaning of the button container.

Steps to reproduce in bryntum example: https://bryntum.com/products/calendar/examples/print/

Open chrome tools. Inspect any button element of the toolbar of the date picker. Check in the doom the use of role="presentation" and how it appears on the accessibility tree. This makes SR technologies to not recognise the element as a button, which difficult web rotor navigation and also can make the user confused as it does not announce to them that they are focusing a button. Button with role="presentation"

ExtAnimal commented 2 months ago

Button.js needs

    role : 'button'

in its configurable block