Skip to content

Commit 8815db0

Browse files
committed
Add new fix for hiding arrows from screen reades
1 parent c2c213a commit 8815db0

File tree

2 files changed

+19
-13
lines changed

2 files changed

+19
-13
lines changed

src/driver.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
justify-content: flex-end;
157157
}
158158

159-
.driver-popover-navigation-btns span + span {
159+
.driver-popover-navigation-btns button + button {
160160
margin-left: 4px;
161161
}
162162

@@ -245,3 +245,7 @@
245245
.driver-popover-arrow-none {
246246
display: none;
247247
}
248+
249+
button.driver-popover-next-btn {
250+
margin-left: 4px;
251+
}

src/popover.ts

+14-12
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,23 @@ export function renderPopover(element: Element, step: DriveStep) {
7474
disableButtons,
7575
showProgress,
7676

77-
nextBtnText = getConfig("nextBtnText") || "Next →",
78-
prevBtnText = getConfig("prevBtnText") || "← Previous",
77+
nextBtnText = getConfig("nextBtnText") || "Next",
78+
prevBtnText = getConfig("prevBtnText") || "Previous",
7979
progressText = getConfig("progressText") || "{current} of {total}",
8080
} = step.popover || {};
8181

82+
const rightArrow = document.createElement("span");
83+
rightArrow.setAttribute("aria-hidden", "true");
84+
rightArrow.innerHTML = " →";
85+
86+
const leftArrow = document.createElement("span");
87+
leftArrow.setAttribute("aria-hidden", "true");
88+
leftArrow.innerHTML = "← ";
89+
8290
popover.nextButton.innerHTML = nextBtnText;
91+
popover.nextButton.appendChild(rightArrow);
8392
popover.previousButton.innerHTML = prevBtnText;
93+
popover.previousButton.insertBefore(leftArrow, popover.previousButton.firstChild);
8494
popover.progress.innerHTML = progressText;
8595

8696
if (title) {
@@ -632,21 +642,13 @@ function createPopover(): PopoverDOM {
632642
previousButton.classList.add("driver-popover-prev-btn");
633643
previousButton.innerHTML = "← Previous";
634644

635-
const previousBtnSpan = document.createElement("span");
636-
previousBtnSpan.setAttribute("aria-hidden", "true");
637-
previousBtnSpan.appendChild(previousButton);
638-
639645
const nextButton = document.createElement("button");
640646
nextButton.type = "button";
641647
nextButton.classList.add("driver-popover-next-btn");
642648
nextButton.innerHTML = "Next →";
643-
644-
const nextBtnSpan = document.createElement("span");
645-
nextBtnSpan.setAttribute("aria-hidden", "true");
646-
nextBtnSpan.appendChild(nextButton);
647649

648-
footerButtons.appendChild(previousBtnSpan);
649-
footerButtons.appendChild(nextBtnSpan);
650+
footerButtons.appendChild(previousButton);
651+
footerButtons.appendChild(nextButton);
650652
footer.appendChild(progress);
651653
footer.appendChild(footerButtons);
652654

0 commit comments

Comments
 (0)