Add new fix for hiding arrows from screen reades

kamranahmedse · Dec 19, 2023 · fe8ad69 · akirk · Dec 19, 2023 · akirk
1 parent ee953f0
commit fe8ad69
Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/driver.css b/src/driver.css
@@ -245,3 +245,7 @@
 .driver-popover-arrow-none {
   display: none;
 }
+
+button.driver-popover-next-btn {
+  margin-left: 4px;
+}
diff --git a/src/popover.ts b/src/popover.ts
@@ -74,13 +74,23 @@ export function renderPopover(element: Element, step: DriveStep) {
     disableButtons,
     showProgress,
 
-    nextBtnText = getConfig("nextBtnText") || "Next &rarr;",
-    prevBtnText = getConfig("prevBtnText") || "&larr; Previous",
+    nextBtnText = getConfig("nextBtnText") || "Next",
+    prevBtnText = getConfig("prevBtnText") || "Previous",
     progressText = getConfig("progressText") || "{current} of {total}",
   } = step.popover || {};
 
+  const rightArrow = document.createElement("span");
+  rightArrow.setAttribute("aria-hidden", "true");
+  rightArrow.innerHTML = " &rarr;";
+
+  const leftArrow = document.createElement("span");
+  leftArrow.setAttribute("aria-hidden", "true");
+  leftArrow.innerHTML = "&larr; ";
+
   popover.nextButton.innerHTML = nextBtnText;
+  popover.nextButton.appendChild(rightArrow);
   popover.previousButton.innerHTML = prevBtnText;
+  popover.previousButton.insertBefore(leftArrow, popover.previousButton.firstChild);
   popover.progress.innerHTML = progressText;
 
   if (title) {