Add ARIA attributes to help widget navigation arrows for accessibility

Author: codeGurhans

js/widgets/help.js

@@ -79,8 +79,12 @@ class HelpWidget {
         // this._helpDiv.style.overflowY = "auto";
 
         const innerHTML = `
-                    <div id="right-arrow" class="hover" tabindex="0" role="button" aria-label="${_("Next")}"></div>
-                    <div id="left-arrow" class="hover" tabindex="0" role="button" aria-label="${_("Previous")}"></div>
+                    <div id="right-arrow" class="hover" tabindex="0" role="button" aria-label="${_(
+                        "Next"
+                    )}"></div>
+                    <div id="left-arrow" class="hover" tabindex="0" role="button" aria-label="${_(
+                        "Previous"
+                    )}"></div>
                     <div id="helpButtonsDiv" tabindex="-1"></div>
                     <div id="helpScrollWrapper">
                         <div id="helpBodyDiv" tabindex="-1"></div>
@@ -470,10 +474,10 @@ class HelpWidget {
 
         const helpDivHTML =
             '<div id="right-arrow" class="hover" tabindex="0" role="button" aria-label="' +
-             _("Next") +
-             '"></div><div id="left-arrow" class="hover" tabindex="0" role="button" aria-label="' +
-             _("Previous") +
-             '"></div><div id="helpButtonsDiv" tabindex="-1"></div><div id="helpScrollWrapper"><div id="helpBodyDiv" tabindex="-1"></div></div>';
+            _("Next") +
+            '"></div><div id="left-arrow" class="hover" tabindex="0" role="button" aria-label="' +
+            _("Previous") +
+            '"></div><div id="helpButtonsDiv" tabindex="-1"></div><div id="helpScrollWrapper"><div id="helpBodyDiv" tabindex="-1"></div></div>';
         this._helpDiv.insertAdjacentHTML("afterbegin", helpDivHTML);
 
         this.widgetWindow.getWidgetBody().append(this._helpDiv);