improve name and return modal

Author: SharonStrats

src/style.js

@@ -68,9 +68,9 @@ export const style = { // styleModule
   modalListItemStyle: 'list-style: none; box-shadow: 1px 1px 1px 1px #888888; padding: .5em;',
   modalAnchorStyle: 'text-decoration: none;',
   modalContentStyle: 'display: flex; flex-direction: column; background-color: #fefefe;',
-  modalCloseStyle: 'color: #aaaaaa; align-self: flex-end; font-size: 20px; font-weight: bold; margin-right: .2em; margin-top: .2em; cursor: pointer;',
-  modalCloseStyleHover: 'color: #666666; align-self: flex-end; font-size: 20px; font-weight: bold; margin-right: .2em; margin-top: .2em; text-decoration: none; cursor: pointer;',
-  modalCloseStyleFocus: 'color: #666666; align-self: flex-end; font-size: 20px; font-weight: bold; margin-right: .2em; margin-top: .2em; text-decoration: none; cursor: pointer; outline: 1px solid #888;',
+  modalCloseStyle: 'background: none; border: 0; padding: 0; color: #aaaaaa; align-self: flex-end; font-size: 20px; font-weight: bold; margin-right: .2em; margin-top: .2em; cursor: pointer;',
+  modalCloseStyleHover: 'background: none; border: 0; padding: 0; color: #666666; align-self: flex-end; font-size: 20px; font-weight: bold; margin-right: .2em; margin-top: .2em; text-decoration: none; cursor: pointer;',
+  modalCloseStyleFocus: 'background: none; border: 0; padding: 0; color: #666666; align-self: flex-end; font-size: 20px; font-weight: bold; margin-right: .2em; margin-top: .2em; text-decoration: none; cursor: pointer; outline: 1px solid #888;',
 
   // ACL
   aclControlBoxContainer: 'margin: 1em;',

src/widgets/modals.ts

@@ -41,7 +41,10 @@ const createModalContent = (dom: HTMLDocument) => {
 }
 
 const createCloseButton = (dom: HTMLDocument, modal: HTMLDivElement) => {
-  const closeButton: HTMLSpanElement = dom.createElement('span')
+  const closeButton: HTMLButtonElement = dom.createElement('button')
+  closeButton.setAttribute('type', 'button')
+  closeButton.setAttribute('aria-label', 'Close modal')
+  closeButton.textContent = 'x'
   closeButton.addEventListener('click', () => closeClickHandler(modal))
   closeButton.addEventListener('mouseenter', () => {
     closeButton.setAttribute('style', style.modalCloseStyleHover)
@@ -55,7 +58,6 @@ const createCloseButton = (dom: HTMLDocument, modal: HTMLDivElement) => {
   closeButton.addEventListener('blur', () => {
     closeButton.setAttribute('style', style.modalCloseStyle)
   })
-  closeButton.setAttribute('tabindex', '0')
   closeButton.setAttribute('style', style.modalCloseStyle)
   return closeButton
 }
@@ -71,7 +73,7 @@ const createListItems = (dom: HTMLDocument, list: ListItem) => {
   return li
 }
 
-const createUnOrderedList = (dom: HTMLDocument, listOfLinks: ListItem[]) => {
+const createUnorderedList = (dom: HTMLDocument, listOfLinks: ListItem[]) => {
   const ul: HTMLUListElement = dom.createElement('ul')
   ul.setAttribute('style', style.modalUnorderedListStyle)
   listOfLinks.forEach(list => {
@@ -80,12 +82,14 @@ const createUnOrderedList = (dom: HTMLDocument, listOfLinks: ListItem[]) => {
   })
   return ul
 }
-export const createWindow = (dom: HTMLDocument, listOfLinks: ListItem[], options: ModalWidgetStyleOptions) => {
+export const createListModal = (dom: HTMLDocument, listOfLinks: ListItem[], options: ModalWidgetStyleOptions) => {
   const modal = createModal(dom, options)
   const modalContent = createModalContent(dom)
   const closeButton = createCloseButton(dom, modal)
-  const ul = createUnOrderedList(dom, listOfLinks)
+  const ul = createUnorderedList(dom, listOfLinks)
   modalContent.appendChild(closeButton)
   modalContent.appendChild(ul)
   modal.appendChild(modalContent)
+
+  return modal
 }