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
53 stars 6 forks source link

Accessibility issue in date picker widget: Focus trapped inside date picker toolbar when using shift+tab with `trapFocus: false` #9903

Closed ghulamghousdev closed 1 month ago

ghulamghousdev commented 1 month ago

Forum post

When navigating with shift+tab, the focus gets trapped inside the calendar date picker's header toolbar buttons with 'trapFocus: false'.

This can be seen in Bryntum DatePicker docs: Core.widget.DatePicker#custom-cell-rendering

Checkout first live demo. Change the code to introduce: trapFocus: false Tab through the date picket toolbar, when reached the end of the toolbar the focus will escape de date picker as expected. But if this is done with shift+tab it will cycle back in the toolbar and the focus won't go backward to last focusable element before date picker toolbar.

Also this can be reproduced in this demo as well: https://bryntum.com/products/calendar/examples/print/ On this demo is not necessary to change the code as the date picker rendered is already rendered with trapFocus: False.

https://github.com/user-attachments/assets/69c3d9eb-1f90-4a89-900f-94b208832d8f

ghulamghousdev commented 1 month ago

Duplicate of https://github.com/bryntum/support/issues/9568