angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.28k stars 6.73k forks source link

Datepicker: Accessibility for screen readers and keyboard navigation #5520

Open leslie945 opened 8 years ago

leslie945 commented 8 years ago

Using UI Bootstrap 1.1.2 and the current 'ui.bootstrap.datepicker' plunker example:

Issues: Navigation instructions are not read when pop-up opens. Cannot use keyboard navigation to get to the top navigation buttons, thus cannot use the quick month/year change ability.

Annoyances: Each day is read as a button, and the row and column numbers are read along with the day number which could lead to confusion.

icfantv commented 8 years ago

@leslie945, was there a particular reason you removed our issue template and free-formed your response? The reason we have the template is to help us help you better and faster by removing an enormous amount of legwork we were required to do before the template was in place. At first glance, it looks like you've been clear in your description (we'll ask for more info if we need it, but again, this is one of the purposes of the template), but in the future, please adhere to the template. Thanks.

leslie945 commented 8 years ago

Sorry about that, I was trying to separate actual bugs from my other suggestions. Also, I was a bit confused by what to fill in the template with, since I was basing my bug on the functionality currently shown for the date picker at https://angular-ui.github.io/bootstrap/

On Mon, Feb 22, 2016, 12:13 PM Adam Gordon notifications@github.com wrote:

@leslie945 https://github.com/leslie945, was there a particular reason you removed our issue template and free-formed your response? The reason we have the template is to help us help you better and faster by removing an enormous amount of legwork we were required to do before the template was in place. At first glance, it looks like you've been clear in your description (we'll ask for more info if we need it, but again, this is one of the purposes of the template), but in the future, please adhere to the template. Thanks.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/bootstrap/issues/5520#issuecomment-187300101 .

icfantv commented 8 years ago

@leslie945, no worries - just info for the future. Cheers.

wesleycho commented 8 years ago

For the annoyances section, what would you recommend? Should it only read out the day the user is on?

The UX for the issues part does seem to be wrong, but this may require some thinking as to how we want all of the keypresses to be handled. Do you have any particular recommendations here?

leslie945 commented 8 years ago

For the annoyances section, I would have it just read day of week, month, day, and year. IE: Friday, February 26, 2016

Best solution I can think of for the UX issues is make those areas tabable or trigger able via single letter keys: n - next, p - previous, y - year view, m - month view, d - day view, etc.

On Wed, Feb 24, 2016, 8:51 AM Wesley Cho notifications@github.com wrote:

For the annoyances section, what would you recommend? Should it only read out the day the user is on?

The UX for the issues part does seem to be wrong, but this may require some thinking as to how we want all of the keypresses to be handled. Do you have any particular recommendations here?

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/bootstrap/issues/5520#issuecomment-188286597 .

dadoadk commented 6 years ago

Is this still something that can be fixed? This is not "inconvenient" this is a real issue. Put yourself in the position as a blind user and try to set the date with this date picker. I've tested this with all possible screen readers and datepickers and it looks like this particular datepicker behaves the worst. I even posted an issue with ChromeVox screen reader and they found that problem is again with the date picker rewriting nodes that make the screen reader read it. A lot of the markup is rewritten. It's good to have a stable DOM subtree and move focus or aria-activedescendant around that. https://bugs.chromium.org/p/chromium/issues/detail?id=699725 This issue persists with new Bootstrap 4 as well. Please revisit, this is a serious problem.

MounikaRMaddhula commented 6 years ago

Can someone tell if this issue has been fixed?