Add aria attributes

Author: kamranahmedse

src/driver.css

@@ -108,7 +108,7 @@
 .driver-popover-progress-text {
   font-size: 13px;
   font-weight: 400;
-  color: #a2a2a2;
+  color: #727272;
   zoom: 1;
 }
 

src/events.ts

@@ -2,7 +2,7 @@ import { refreshActiveHighlight } from "./highlight";
 import { emit } from "./emitter";
 import { getState, setState } from "./state";
 import { getConfig } from "./config";
-import { getFocusableElements, isElementVisible } from "./utils";
+import { getFocusableElements } from "./utils";
 
 export function requireRefresh() {
   const resizeTimeout = getState("__resizeTimeout");

src/highlight.ts

@@ -146,12 +146,22 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   }
 
   fromElement.classList.remove("driver-active-element");
+  fromElement.removeAttribute("aria-haspopup");
+  fromElement.removeAttribute("aria-expanded");
+  fromElement.removeAttribute("aria-controls");
+
   toElement.classList.add("driver-active-element");
+  toElement.setAttribute("aria-haspopup", "dialog");
+  toElement.setAttribute("aria-expanded", "true");
+  toElement.setAttribute("aria-controls", "driver-popover-content");
 }
 
 export function destroyHighlight() {
   document.getElementById("driver-dummy-element")?.remove();
   document.querySelectorAll(".driver-active-element").forEach(element => {
     element.classList.remove("driver-active-element");
+    element.removeAttribute("aria-haspopup");
+    element.removeAttribute("aria-expanded");
+    element.removeAttribute("aria-controls");
   });
 }

src/popover.ts

@@ -138,6 +138,11 @@ export function renderPopover(element: Element, step: DriveStep) {
   popoverWrapper.style.bottom = "";
   popoverWrapper.style.right = "";
 
+  popoverWrapper.id = "driver-popover-content";
+  popoverWrapper.setAttribute("role", "dialog");
+  popoverWrapper.setAttribute("aria-labelledby", "driver-popover-title");
+  popoverWrapper.setAttribute("aria-describedby", "driver-popover-description");
+
   // Reset the classes responsible for the arrow position
   const popoverArrow = popover.arrow;
   popoverArrow.className = "driver-popover-arrow";
@@ -593,21 +598,25 @@ function createPopover(): PopoverDOM {
   const arrow = document.createElement("div");
   arrow.classList.add("driver-popover-arrow");
 
-  const title = document.createElement("div");
+  const title = document.createElement("header");
+  title.id = "driver-popover-title";
   title.classList.add("driver-popover-title");
   title.style.display = "none";
   title.innerText = "Popover Title";
 
   const description = document.createElement("div");
+  description.id = "driver-popover-description";
   description.classList.add("driver-popover-description");
   description.style.display = "none";
   description.innerText = "Popover description is here";
 
   const closeButton = document.createElement("button");
+  closeButton.type = "button";
   closeButton.classList.add("driver-popover-close-btn");
+  closeButton.setAttribute("aria-label", "Close");
   closeButton.innerHTML = "×";
 
-  const footer = document.createElement("div");
+  const footer = document.createElement("footer");
   footer.classList.add("driver-popover-footer");
 
   const progress = document.createElement("span");
@@ -618,10 +627,12 @@ function createPopover(): PopoverDOM {
   footerButtons.classList.add("driver-popover-navigation-btns");
 
   const previousButton = document.createElement("button");
+  previousButton.type = "button";
   previousButton.classList.add("driver-popover-prev-btn");
   previousButton.innerHTML = "← Previous";
 
   const nextButton = document.createElement("button");
+  nextButton.type = "button";
   nextButton.classList.add("driver-popover-next-btn");
   nextButton.innerHTML = "Next →";