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:
committed by
benjamin wil
parent
5b02a864e6
commit
902ada7a3e
@@ -1,4 +1,7 @@
|
|||||||
en:
|
en:
|
||||||
|
editor:
|
||||||
|
function_bar:
|
||||||
|
help: Help
|
||||||
pagination:
|
pagination:
|
||||||
aria:
|
aria:
|
||||||
label: Pagination
|
label: Pagination
|
||||||
|
|||||||
@@ -45,7 +45,15 @@
|
|||||||
<span class="pr-2"></span>
|
<span class="pr-2"></span>
|
||||||
{{/critic_markup}}
|
{{/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-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>
|
||||||
|
|
||||||
<div id="gollum-editor-format-selector">
|
<div id="gollum-editor-format-selector">
|
||||||
|
|||||||
Reference in New Issue
Block a user