MDL-72511 calendar: Better calendar navigation labelling

* Make the accessible labels of the previous and next month links more
informative by indicating the name of the previous/next months.
* Make titles on the previous and next month links reflect the actual
month and show titles only when the calendar is rendered within a block.
This is because the title attribute is only used for the sake for
sighted users who may need to know the meaning of the previous/next
month links, especially when the calendar is displayed in compact form
where the previous/next month name is not shown.
This commit is contained in:
Jun Pataleta
2025-08-19 11:22:17 +08:00
parent 1d971e0a82
commit 0cf827bfa5
2 changed files with 6 additions and 4 deletions
@@ -48,7 +48,7 @@
<a{{!
}} href="#"{{!
}} class="arrow_link previous"{{!
}} title="{{#str}}monthprev, calendar{{/str}}"{{!
}} title="{{#str}}monthprevwithname, calendar, {{previousperiodname}}{{/str}}"{{!
}} data-year="{{previousperiod.year}}"{{!
}} data-month="{{previousperiod.mon}}"{{!
}} aria-label="{{#str}}monthprevwithname, calendar, {{previousperiodname}}{{/str}}" {{!
@@ -63,7 +63,7 @@
<a{{!
}} href="#"{{!
}} class="arrow_link next"{{!
}} title="{{#str}}monthnext, calendar{{/str}}"{{!
}} title="{{#str}}monthnextwithname, calendar, {{nextperiodname}}{{/str}}"{{!
}} data-year="{{nextperiod.year}}"{{!
}} data-month="{{nextperiod.mon}}"{{!
}} aria-label="{{#str}}monthnextwithname, calendar, {{nextperiodname}}{{/str}}" {{!
@@ -36,10 +36,11 @@
<a{{!
}} href="{{previousperiodlink}}"{{!
}} class="arrow_link previous"{{!
}} title="{{#str}}monthprev, calendar{{/str}}"{{!
}} {{#viewinginblock}}title="{{#str}}monthprevwithname, calendar, {{previousperiodname}}{{/str}}" {{/viewinginblock}} {{!
}} data-year="{{previousperiod.year}}"{{!
}} data-month="{{previousperiod.mon}}"{{!
}} data-drop-zone="nav-link" {{!
}} aria-label="{{#str}}monthprevwithname, calendar, {{previousperiodname}}{{/str}}" {{!
}}>
<span class="arrow" aria-hidden="true">{{{larrow}}}</span>
&nbsp;
@@ -56,10 +57,11 @@
<a{{!
}} href="{{nextperiodlink}}"{{!
}} class="arrow_link next"{{!
}} title="{{#str}}monthnext, calendar{{/str}}"{{!
}} {{#viewinginblock}}title="{{#str}}monthnextwithname, calendar, {{nextperiodname}}{{/str}}" {{/viewinginblock}} {{!
}} data-year="{{nextperiod.year}}"{{!
}} data-month="{{nextperiod.mon}}"{{!
}} data-drop-zone="nav-link" {{!
}} aria-label="{{#str}}monthnextwithname, calendar, {{nextperiodname}}{{/str}}" {{!
}}>
<span class="arrow_text">{{nextperiodname}}</span>
&nbsp;