fix(datepicker): add aria labels to arrow buttons #6247
Conversation
| @@ -1,9 +1,9 @@ | |||
| <table role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}"> | |||
| <thead> | |||
| <tr> | |||
| <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th> | |||
| <th><button type="button" aria-label="Previous Month" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th> | |||
There was a problem hiding this comment.
Good point. It probably should. I'll see if I can update this to be language agnostic (perhaps using aria-labelledby) so that we don't need to worry about localizing strings.
Edit: In other similar situations in angular-uib, I notice that aria-hidden=true is being used. That seems odd, but maybe it's the correct solution. I'll read up to see if I can improve my ADA chops.
There was a problem hiding this comment.
After looking into it a bit more, I followed the pattern currently being used for the carousel's forward and back buttons, and used aria-hidden=true on the glyphicon, along with a <span class="sr-only">screen-reader text</span>. It doesn't fix the issue with localization (which the carousel also suffers from), but widespread localization of strings is probably big enough for a separate issue. Thoughts?
|
Going to merge this, but leave the issue open as something in need of a solution still. |
Fixes #6229