Baseweb: [Datepicker] Accessibility Improvements

Created on 28 Oct 2019  路  10Comments  路  Source: uber/baseweb


Current Behavior

Compared to the w3c example (https://w3c.github.io/aria-practices/examples/dialog-modal/datepicker-dialog.html) the datepicker component has several issues to discuss.

1. calendar has role=application
this role is not recommended and should be removed. From : https://w3c.github.io/using-aria/#using-application
As of this writing, when application mode is set, many screen readers stop intercepting keystrokes, and pass all keystrokes directly to the browser.

  1. input auto opens date picker dialog, but does not move focus to dialog
    A separation by adding a button to open the datepicker dialog may be useful.

  2. Popover version has bugs, e.g. no role or aria for dialog.

  3. Additional keyboard access for "Home" (first day in current row) and "End" (last day in current row) should be added.

  4. Additional keyboard access for "pageUp" (previous month) and "pageDown" (next month) should be added.

  5. role "grid" is missing for calendar "table", which consists only of divs.

  6. popover and calendar-table should have "aria-labelledby" and current selected month as label

Expected Behavior

Please see: https://w3c.github.io/aria-practices/examples/dialog-modal/datepicker-dialog.html

Your Environment

| Tech | Version |
| ------- | ------- |
| Base UI | v9.11.0 | https://baseweb.design/components/datepicker/
| React | |
| browser | Chrome latest | Win & OS X

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.
enhancement help wanted

All 10 comments

Please have a look and give a first feedback of your opinions for further descriptions. Thanks.

These look valid - what do you think @nadiia ?

@MarcusMorba, would you be up for taking these issues, one by one, and sending PRs?

@gergelyke I can try some fixes described here, one by one. Please suggest if it is okay ..

@gergelyke I can try some fixes described here, one by one. Please suggest if it is okay ..

that sounds perfect

Thank you, @MarcusMorba, for putting this list together. The second point on adding a button to open a dialog is valid but needs to be approved by design. It can also be added optionally when composing the calendar with an input.

Can I try fixing a few items mentioned in the issue @gergelyke

Sure thing - I've just assigned it to you

Thanks to all. Will post future issues one by one for the latest releases I麓ll check next week. Sorry for the very delayed response. Last weeks have been pretty busy.

@MarcusMorba I believe most of these are fixed - if not, can you create one story for each bug?

Great news. Will recheck and then create one story for each bug if necessary. THANKS.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

matthewharwood picture matthewharwood  路  3Comments

vik-buchinski picture vik-buchinski  路  4Comments

jasongi-actu picture jasongi-actu  路  7Comments

maraisr picture maraisr  路  5Comments

jonsadka picture jonsadka  路  4Comments