fix: add labels to options icon buttons for screen reader users
Change-Id: Ibc8ac61640b58c9d033ba05693050e4105271879
diff --git a/src/options/elements/options-editor/languages-editor.ts b/src/options/elements/options-editor/languages-editor.ts
index d6f3e52..b792f5a 100644
--- a/src/options/elements/options-editor/languages-editor.ts
+++ b/src/options/elements/options-editor/languages-editor.ts
@@ -103,13 +103,19 @@
<paper-button
class="movebtn"
@click=${() => this.swapLanguages(i, i - 1)}>
- <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
+ <ha-svg-icon
+ .path=${mdiArrowUp}
+ aria-label="${msg('options_language_moveup')}">
+ </ha-svg-icon>
</paper-button>
`);
} else {
moveBtns.push(html`
<paper-button class="movebtn" disabled>
- <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
+ <ha-svg-icon
+ .path=${mdiArrowUp}
+ aria-label="${msg('options_language_moveup')}">
+ </ha-svg-icon>
</paper-button>
`);
}
@@ -118,13 +124,19 @@
<paper-button
class="movebtn"
@click=${() => this.swapLanguages(i, i + 1)}>
- <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
+ <ha-svg-icon
+ .path=${mdiArrowDown}
+ aria-label="${msg('options_language_movedown')}">
+ </ha-svg-icon>
</paper-button>
`);
} else {
moveBtns.push(html`
<paper-button class="movebtn" disabled>
- <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
+ <ha-svg-icon
+ .path=${mdiArrowDown}
+ aria-label="${msg('options_language_movedown')}">
+ </ha-svg-icon>
</paper-button>
`);
}
@@ -138,7 +150,10 @@
<paper-button
class="delete"
@click=${() => this.deleteLanguage(lang)}>
- <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+ <ha-svg-icon
+ .path=${mdiClose}
+ aria-label="${msg('options_language_remove')}">
+ </ha-svg-icon>
</paper-button>
</li>
`;
diff --git a/src/static/_locales/en/messages.json b/src/static/_locales/en/messages.json
index ac04853..8a603c7 100644
--- a/src/static/_locales/en/messages.json
+++ b/src/static/_locales/en/messages.json
@@ -59,6 +59,18 @@
"message": "Languages:",
"description": "Header of the selected languages list."
},
+ "options_language_moveup": {
+ "message": "Move up",
+ "description": "Label for the button which lets a user move a language up the list."
+ },
+ "options_language_movedown": {
+ "message": "Move down",
+ "description": "Label for the button which lets a user move a language down the list."
+ },
+ "options_language_remove": {
+ "message": "Remove",
+ "description": "Label for the button which lets a user remove a language from the list."
+ },
"options_otheroptionsheader": {
"message": "Other options:",
"description": "Subheader in the options page before the options to choose where should the translation be shown.."