Fix: Move button labels to span tags (fixes adaptlearning#268)

robertmausser · Jun 27, 2023 · 433b7f9 · 433b7f9
1 parent 9dca259
commit 433b7f9
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/templates/narrative.jsx b/templates/narrative.jsx
@@ -85,10 +85,10 @@ export default function Narrative(props) {
                   'btn-icon narrative__controls narrative__controls-left',
                   !shouldEnableBack && 'is-disabled'
                 ])}
-                aria-label={backLabel}
                 aria-disabled={!shouldEnableBack || null}
                 onClick={onNavigationClicked}
               >
+                <span className="aria-label" dangerouslySetInnerHTML={{ __html: backLabel }} />
                 <span className="icon" aria-hidden="true" />
               </button>
 
@@ -113,10 +113,10 @@ export default function Narrative(props) {
                   'btn-icon narrative__controls narrative__controls-right',
                   !shouldEnableNext && 'is-disabled'
                 ])}
-                aria-label={nextLabel}
                 aria-disabled={!shouldEnableNext || null}
                 onClick={onNavigationClicked}
               >
+                <span className="aria-label" dangerouslySetInnerHTML={{ __html: nextLabel }} />
                 <span className="icon" aria-hidden="true" />
               </button>
 
@@ -226,10 +226,10 @@ export default function Narrative(props) {
               'btn-icon narrative__controls narrative__controls-left',
               !shouldEnableBack && 'is-disabled'
             ])}
-            aria-label={backLabel}
             aria-disabled={!shouldEnableBack || null}
             onClick={onNavigationClicked}
           >
+            <span className="aria-label" dangerouslySetInnerHTML={{ __html: backLabel }} />
             <span className="icon" aria-hidden="true" />
           </button>
 
@@ -239,10 +239,10 @@ export default function Narrative(props) {
               'btn-icon narrative__controls narrative__controls-right',
               !shouldEnableNext && 'is-disabled'
             ])}
-            aria-label={nextLabel}
             aria-disabled={!shouldEnableNext || null}
             onClick={onNavigationClicked}
           >
+            <span className="aria-label" dangerouslySetInnerHTML={{ __html: nextLabel }} />
             <span className="icon" aria-hidden="true" />
           </button>