Add aria attributes
Browse files- src/driver.css +1 -1
- src/events.ts +1 -1
- src/highlight.ts +10 -0
- src/popover.ts +13 -2
src/driver.css
CHANGED
@@ -108,7 +108,7 @@
|
|
108 |
.driver-popover-progress-text {
|
109 |
font-size: 13px;
|
110 |
font-weight: 400;
|
111 |
-
color: #
|
112 |
zoom: 1;
|
113 |
}
|
114 |
|
|
|
108 |
.driver-popover-progress-text {
|
109 |
font-size: 13px;
|
110 |
font-weight: 400;
|
111 |
+
color: #727272;
|
112 |
zoom: 1;
|
113 |
}
|
114 |
|
src/events.ts
CHANGED
@@ -2,7 +2,7 @@ import { refreshActiveHighlight } from "./highlight";
|
|
2 |
import { emit } from "./emitter";
|
3 |
import { getState, setState } from "./state";
|
4 |
import { getConfig } from "./config";
|
5 |
-
import { getFocusableElements
|
6 |
|
7 |
export function requireRefresh() {
|
8 |
const resizeTimeout = getState("__resizeTimeout");
|
|
|
2 |
import { emit } from "./emitter";
|
3 |
import { getState, setState } from "./state";
|
4 |
import { getConfig } from "./config";
|
5 |
+
import { getFocusableElements } from "./utils";
|
6 |
|
7 |
export function requireRefresh() {
|
8 |
const resizeTimeout = getState("__resizeTimeout");
|
src/highlight.ts
CHANGED
@@ -146,12 +146,22 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
|
|
146 |
}
|
147 |
|
148 |
fromElement.classList.remove("driver-active-element");
|
|
|
|
|
|
|
|
|
149 |
toElement.classList.add("driver-active-element");
|
|
|
|
|
|
|
150 |
}
|
151 |
|
152 |
export function destroyHighlight() {
|
153 |
document.getElementById("driver-dummy-element")?.remove();
|
154 |
document.querySelectorAll(".driver-active-element").forEach(element => {
|
155 |
element.classList.remove("driver-active-element");
|
|
|
|
|
|
|
156 |
});
|
157 |
}
|
|
|
146 |
}
|
147 |
|
148 |
fromElement.classList.remove("driver-active-element");
|
149 |
+
fromElement.removeAttribute("aria-haspopup");
|
150 |
+
fromElement.removeAttribute("aria-expanded");
|
151 |
+
fromElement.removeAttribute("aria-controls");
|
152 |
+
|
153 |
toElement.classList.add("driver-active-element");
|
154 |
+
toElement.setAttribute("aria-haspopup", "dialog");
|
155 |
+
toElement.setAttribute("aria-expanded", "true");
|
156 |
+
toElement.setAttribute("aria-controls", "driver-popover-content");
|
157 |
}
|
158 |
|
159 |
export function destroyHighlight() {
|
160 |
document.getElementById("driver-dummy-element")?.remove();
|
161 |
document.querySelectorAll(".driver-active-element").forEach(element => {
|
162 |
element.classList.remove("driver-active-element");
|
163 |
+
element.removeAttribute("aria-haspopup");
|
164 |
+
element.removeAttribute("aria-expanded");
|
165 |
+
element.removeAttribute("aria-controls");
|
166 |
});
|
167 |
}
|
src/popover.ts
CHANGED
@@ -138,6 +138,11 @@ export function renderPopover(element: Element, step: DriveStep) {
|
|
138 |
popoverWrapper.style.bottom = "";
|
139 |
popoverWrapper.style.right = "";
|
140 |
|
|
|
|
|
|
|
|
|
|
|
141 |
// Reset the classes responsible for the arrow position
|
142 |
const popoverArrow = popover.arrow;
|
143 |
popoverArrow.className = "driver-popover-arrow";
|
@@ -593,21 +598,25 @@ function createPopover(): PopoverDOM {
|
|
593 |
const arrow = document.createElement("div");
|
594 |
arrow.classList.add("driver-popover-arrow");
|
595 |
|
596 |
-
const title = document.createElement("
|
|
|
597 |
title.classList.add("driver-popover-title");
|
598 |
title.style.display = "none";
|
599 |
title.innerText = "Popover Title";
|
600 |
|
601 |
const description = document.createElement("div");
|
|
|
602 |
description.classList.add("driver-popover-description");
|
603 |
description.style.display = "none";
|
604 |
description.innerText = "Popover description is here";
|
605 |
|
606 |
const closeButton = document.createElement("button");
|
|
|
607 |
closeButton.classList.add("driver-popover-close-btn");
|
|
|
608 |
closeButton.innerHTML = "×";
|
609 |
|
610 |
-
const footer = document.createElement("
|
611 |
footer.classList.add("driver-popover-footer");
|
612 |
|
613 |
const progress = document.createElement("span");
|
@@ -618,10 +627,12 @@ function createPopover(): PopoverDOM {
|
|
618 |
footerButtons.classList.add("driver-popover-navigation-btns");
|
619 |
|
620 |
const previousButton = document.createElement("button");
|
|
|
621 |
previousButton.classList.add("driver-popover-prev-btn");
|
622 |
previousButton.innerHTML = "← Previous";
|
623 |
|
624 |
const nextButton = document.createElement("button");
|
|
|
625 |
nextButton.classList.add("driver-popover-next-btn");
|
626 |
nextButton.innerHTML = "Next →";
|
627 |
|
|
|
138 |
popoverWrapper.style.bottom = "";
|
139 |
popoverWrapper.style.right = "";
|
140 |
|
141 |
+
popoverWrapper.id = "driver-popover-content";
|
142 |
+
popoverWrapper.setAttribute("role", "dialog");
|
143 |
+
popoverWrapper.setAttribute("aria-labelledby", "driver-popover-title");
|
144 |
+
popoverWrapper.setAttribute("aria-describedby", "driver-popover-description");
|
145 |
+
|
146 |
// Reset the classes responsible for the arrow position
|
147 |
const popoverArrow = popover.arrow;
|
148 |
popoverArrow.className = "driver-popover-arrow";
|
|
|
598 |
const arrow = document.createElement("div");
|
599 |
arrow.classList.add("driver-popover-arrow");
|
600 |
|
601 |
+
const title = document.createElement("header");
|
602 |
+
title.id = "driver-popover-title";
|
603 |
title.classList.add("driver-popover-title");
|
604 |
title.style.display = "none";
|
605 |
title.innerText = "Popover Title";
|
606 |
|
607 |
const description = document.createElement("div");
|
608 |
+
description.id = "driver-popover-description";
|
609 |
description.classList.add("driver-popover-description");
|
610 |
description.style.display = "none";
|
611 |
description.innerText = "Popover description is here";
|
612 |
|
613 |
const closeButton = document.createElement("button");
|
614 |
+
closeButton.type = "button";
|
615 |
closeButton.classList.add("driver-popover-close-btn");
|
616 |
+
closeButton.setAttribute("aria-label", "Close");
|
617 |
closeButton.innerHTML = "×";
|
618 |
|
619 |
+
const footer = document.createElement("footer");
|
620 |
footer.classList.add("driver-popover-footer");
|
621 |
|
622 |
const progress = document.createElement("span");
|
|
|
627 |
footerButtons.classList.add("driver-popover-navigation-btns");
|
628 |
|
629 |
const previousButton = document.createElement("button");
|
630 |
+
previousButton.type = "button";
|
631 |
previousButton.classList.add("driver-popover-prev-btn");
|
632 |
previousButton.innerHTML = "← Previous";
|
633 |
|
634 |
const nextButton = document.createElement("button");
|
635 |
+
nextButton.type = "button";
|
636 |
nextButton.classList.add("driver-popover-next-btn");
|
637 |
nextButton.innerHTML = "Next →";
|
638 |
|