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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user