accessibility

Author: SharonStrats

src/widgets/modals.ts

@@ -23,13 +23,25 @@ window.onclick = function(event) {
   if (event.target == modal) {
     modal.style.display = "none";
   } */
-const closeClickHandler = (modal: HTMLDivElement) => {
+const closeClickHandler = (modal: HTMLDivElement, returnFocusTo?: Element | null) => {
   modal.style.display = 'none'
+  if (returnFocusTo && returnFocusTo instanceof HTMLElement) {
+    returnFocusTo.focus()
+  }
 }
 
-const createModal = (dom: HTMLDocument, options: ModalWidgetStyleOptions) => {
+const createModal = (dom: HTMLDocument, options: ModalWidgetStyleOptions, returnFocusTo?: Element | null) => {
   const modal = dom.createElement('div')
   modal.classList.add('modal')
+  modal.setAttribute('role', 'dialog')
+  modal.setAttribute('aria-modal', options.withGreyedBackground ? 'true' : 'false')
+  modal.setAttribute('aria-label', options.ariaLabel || 'List dialog')
+  modal.setAttribute('tabindex', '-1')
+  modal.addEventListener('keydown', event => {
+    if (event.key === 'Escape') {
+      closeClickHandler(modal, returnFocusTo)
+    }
+  })
   modal.setAttribute('style', getModalStyle(options))
   return modal
 }
@@ -40,12 +52,13 @@ const createModalContent = (dom: HTMLDocument) => {
   return modalContent
 }
 
-const createCloseButton = (dom: HTMLDocument, modal: HTMLDivElement) => {
+const createCloseButton = (dom: HTMLDocument, modal: HTMLDivElement, returnFocusTo?: Element | null) => {
   const closeButton: HTMLButtonElement = dom.createElement('button')
   closeButton.setAttribute('type', 'button')
   closeButton.setAttribute('aria-label', 'Close modal')
+  closeButton.setAttribute('title', 'Close')
   closeButton.textContent = 'x'
-  closeButton.addEventListener('click', () => closeClickHandler(modal))
+  closeButton.addEventListener('click', () => closeClickHandler(modal, returnFocusTo))
   closeButton.addEventListener('mouseenter', () => {
     closeButton.setAttribute('style', style.modalCloseStyleHover)
   })
@@ -75,6 +88,7 @@ const createListItems = (dom: HTMLDocument, list: ListItem) => {
 
 const createUnorderedList = (dom: HTMLDocument, listOfLinks: ListItem[]) => {
   const ul: HTMLUListElement = dom.createElement('ul')
+  ul.setAttribute('role', 'list')
   ul.setAttribute('style', style.modalUnorderedListStyle)
   listOfLinks.forEach(list => {
     const li = createListItems(dom, list)
@@ -83,13 +97,20 @@ const createUnorderedList = (dom: HTMLDocument, listOfLinks: ListItem[]) => {
   return ul
 }
 export const createListModal = (dom: HTMLDocument, listOfLinks: ListItem[], options: ModalWidgetStyleOptions) => {
-  const modal = createModal(dom, options)
+  const returnFocusTo = dom.activeElement
+  const modal = createModal(dom, options, returnFocusTo)
   const modalContent = createModalContent(dom)
-  const closeButton = createCloseButton(dom, modal)
+  const closeButton = createCloseButton(dom, modal, returnFocusTo)
   const ul = createUnorderedList(dom, listOfLinks)
   modalContent.appendChild(closeButton)
   modalContent.appendChild(ul)
   modal.appendChild(modalContent)
 
+  setTimeout(() => {
+    if (closeButton.isConnected) {
+      closeButton.focus()
+    }
+  }, 0)
+
   return modal
 }

src/widgets/modalsStyle.ts

@@ -5,7 +5,8 @@
 export type ModalWidgetStyleOptions = {
   topPosition?: string,
   leftPosition?: string,
-  withGreyedBackground?: boolean
+  withGreyedBackground?: boolean,
+  ariaLabel?: string
 }
 
 export const getModalStyle = (options: ModalWidgetStyleOptions = {}) => {