feat(datepicker): add aria labels and aria level#2
Open
vbergeron-ls wants to merge 7 commits intomasterfrom
Open
feat(datepicker): add aria labels and aria level#2vbergeron-ls wants to merge 7 commits intomasterfrom
vbergeron-ls wants to merge 7 commits intomasterfrom
Conversation
vbergeron-ls
commented
Feb 9, 2026
template/datepicker/day.html
Outdated
| <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> | ||
| <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">next</span></button></th> | ||
| <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1" aria-label="{{::previousButtonLabel}}"><i aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">{{::previousButtonLabel}}</span></button></th> | ||
| <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-level="5" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> |
Author
There was a problem hiding this comment.
I'm not sure about using an aria-level of 5 here now that we don't even have the chronogolf context... I will investigate removing the heading role or alternative solutions.
Author
There was a problem hiding this comment.
Removed aria level and heading, confirmed no major change to css
vbergeron-ls
changed the title
vbergeron-ls
force-pushed
the
golf-3068-add-aria-labels-and-level-to-datepicker
branch
from
5332088 to
ec3b34b
Compare
ls-michael-smith
approved these changes
Feb 12, 2026
ls-michael-smith
left a comment
ls-michael-smith
left a comment
There was a problem hiding this comment.
Only thing I wonder is if we're going to get hit with some 'next year' vs 'next' issue.
Author
@ls-michael-smith I don't want to expose 6 different configs (2 for each of month/year/years views), so I'm thinking of only using Previous/Next (so changing localization in the chronogolf repo). EDIT: actually I changed my mind and I think if we don't provide the context of month/year/years we'll still get flagged for accessibility so 6 config options it is. |
olimart
approved these changes
Feb 13, 2026
| ngModelOptions: {}, | ||
| nextMonthLabel: 'Next month', | ||
| nextYearLabel: 'Next year', | ||
| nextYearsLabel: 'Next 20 years', |
There was a problem hiding this comment.
- does the datepicker limit to the next 20 years?
- no translation supported I guess?
Author
There was a problem hiding this comment.
- Yep because in years view, the grid displays 20 years at a time
- This is essentially the default value when nothing is provided to the datepicker (because this repo does not support localization) but we will provide localized labels from chronogolf.
template/datepicker/day.html
Outdated
| <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="0"><strong>{{title}}</strong></button></th> | ||
| <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="0" aria-label="Next month"><i aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">next</span></button></th> | ||
| <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="0" aria-label="{{::previousMonthLabel}}"><i aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">{{::previousMonthLabel}}</span></button></th> | ||
| <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> |
There was a problem hiding this comment.
Assuming tabindex="-1" was changed on purpose.
Author
There was a problem hiding this comment.
Oh that's a good catch actually it was not supposed to be changed.
template/datepicker/month.html
Outdated
| <th colspan="{{::yearHeaderColspan}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="0"><strong>{{title}}</strong></button></th> | ||
| <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="0" aria-label="Next year"><i aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">next</span></i></button></th> | ||
| <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="0" aria-label="{{::previousYearLabel}}"><i aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">{{::previousYearLabel}}</span></button></th> | ||
| <th colspan="{{::yearHeaderColspan}}"><button id="{{::uniqueId}}-title" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
GOLF-3068
This PR adds:
No more role=heading and aria level
Aria labels passed as options
No aria label passed
