Make help button more accessible

Using an `aria-label` for buttons without text is a good practice.

This lets users who use screenreaders better understand what this button
is for.
This commit is contained in:
benjamin wil
2022-08-14 14:31:08 -07:00
committed by benjamin wil
parent 5b02a864e6
commit 193f449058
2 changed files with 13 additions and 2 deletions
+3
View File
@@ -1,4 +1,7 @@
en:
editor:
function_bar:
help: Help
pagination:
aria:
label: Pagination
+10 -2
View File
@@ -41,11 +41,19 @@
<span class="pr-2"></span>
{{#critic_markup}}
<button class="btn btn-sm function-button" id="function-critic-accept" title="Accept Selected CriticMarkup">{{#octicon}}plus{{/octicon}}</button>
<button class="btn btn-sm function-button" id="function-critic-reject" title="Reject Selected CriticMarkup">{{#octicon}}dash{{/octicon}}</button>
<button class="btn btn-sm function-button" id="function-critic-reject" title="Reject Selected CriticMarkup">{{#octicon}}dash{{/octicon}}</button>
<span class="pr-2"></span>
{{/critic_markup}}
<button class="btn btn-sm function-button" id="function-text-direction" title="Reverse Text Direction">{{#octicon}}arrow-both{{/octicon}}</button>
<button class="btn btn-sm function-button" id="function-help" title="Help">{{#octicon}}question{{/octicon}}</button>
<button
aria-label="{{tt.editor.function_bar.help}}"
class="btn btn-sm function-button"
data-help-text="{{help_text}}"
id="function-help"
title="{{tt.editor.function_bar.help}}"
>
{{#octicon}}question{{/octicon}}
</button>
</div>
<div id="gollum-editor-format-selector">