kamrify commited on
Commit
6bf3ab4
·
1 Parent(s): 0f198fd

Add aria attributes

Browse files
Files changed (4) hide show
  1. src/driver.css +1 -1
  2. src/events.ts +1 -1
  3. src/highlight.ts +10 -0
  4. 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: #a2a2a2;
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, isElementVisible } from "./utils";
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("div");
 
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("div");
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