From 902ada7a3eded9978e1ad0dc3c5f8a72c1d0b7df Mon Sep 17 00:00:00 2001
From: benjamin wil <hey@benjaminwil.info>
Date: Sun, 14 Aug 2022 14:31:08 -0700
Subject: [PATCH] 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.
---
 lib/gollum/locales/en.yml            |  3 +++
 lib/gollum/templates/editor.mustache | 12 ++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/gollum/locales/en.yml b/lib/gollum/locales/en.yml
index 5ca5021f..b27c12c5 100644
--- a/lib/gollum/locales/en.yml
+++ b/lib/gollum/locales/en.yml
@@ -1,4 +1,7 @@
 en:
+  editor:
+    function_bar:
+      help: Help
   pagination:
     aria:
       label: Pagination
diff --git a/lib/gollum/templates/editor.mustache b/lib/gollum/templates/editor.mustache
index 75e3c184..7b0e0237 100644
--- a/lib/gollum/templates/editor.mustache
+++ b/lib/gollum/templates/editor.mustache
@@ -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">