feat: add screen reader text to navigation button

This commit is contained in:
alistair3149 2024-06-02 14:02:34 -04:00
parent 7e921a4a3a
commit 0904298948
No known key found for this signature in database
4 changed files with 9 additions and 1 deletions

View file

@ -52,7 +52,9 @@
"ext.tabberNeue/Util.js"
],
"messages": [
"error"
"error",
"tabberneue-button-next",
"tabberneue-button-prev"
],
"styles": [
"ext.tabberNeue/ext.tabberNeue.less",

View file

@ -7,6 +7,8 @@
]
},
"tabberneue-desc": "Allows to create tabs within a page. Forked from [https://www.mediawiki.org/wiki/Extension:Tabber Extension:Tabber].",
"tabberneue-button-next": "Next",
"tabberneue-button-prev": "Previous",
"tabberneue-tabber-category": "Pages using Tabber parser tag",
"tabberneue-tabbertransclude-category": "Pages using TabberTransclude parser tag",
"tabberneue-visualeditor-mwtabberdialog-title": "Tabber",

View file

@ -5,6 +5,8 @@
]
},
"tabberneue-desc": "{{desc|name=TabberNeue|url=http://www.mediawiki.org/wiki/Extension:TabberNeue}}",
"tabberneue-button-next": "Next button label text for screen reader",
"tabberneue-button-prev": "Previous button label text for screen reader",
"tabberneue-tabber-category": "{{tracking category name}}\nTracking category for pages with tabber parser tag.",
"tabberneue-tabbertransclude-category": "{{tracking category name}}\nTracking category for pages with tabbertransclude parser tag.",
"tabberneue-visualeditor-mwtabberdialog-title": "Title for the dialog to edit <nowiki><tabber></nowiki> Tabber blocks.",

View file

@ -595,9 +595,11 @@ class TabberBuilder {
createHeader() {
const prevButton = document.createElement( 'button' );
prevButton.classList.add( 'tabber__header__prev' );
prevButton.setAttribute( 'aria-label', mw.message( 'tabberneue-button-prev' ).text() );
const nextButton = document.createElement( 'button' );
nextButton.classList.add( 'tabber__header__next' );
nextButton.setAttribute( 'aria-label', mw.message( 'tabberneue-button-next' ).text() );
this.header.append( prevButton, this.tablist, nextButton );
}