Accessibility Improvement

Covered:
- Keyboard navigation looping within the modal
- Keyboard navigation go back to activated link
- Makes the modal the right role
- Aria attributes set.

i18n/i18n.json

@@ -80,7 +80,7 @@
       "telegram": "Telegram",
       "whatsapp": "WhatsApp",
       "skype": "Skype",
-      "call": "appeler",
+      "call": "Appeler",
       "open": "Ouvrir",
       "_default": " par défaut",
       "_as_default": " par défaut",

lib/mailgo.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 0 */
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"languages\":[\"en\",\"it\",\"es\",\"de\",\"fr\"],\"translations\":{\"en\":{\"open_in_\":\"open in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"subject \",\"body_\":\"body \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"call\",\"open\":\"open\",\"_default\":\" default\",\"_as_default\":\" as default\",\"copy\":\"copy\"},\"it\":{\"open_in_\":\"apri con \",\"cc_\":\"cc \",\"bcc_\":\"ccn \",\"subject_\":\"oggetto \",\"body_\":\"testo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"chiama\",\"open\":\"apri\",\"_default\":\" \",\"_as_default\":\" \",\"copy\":\"copia\"},\"es\":{\"open_in_\":\"abrir con \",\"cc_\":\"cc \",\"bcc_\":\"cco \",\"subject_\":\"asunto \",\"body_\":\"cuerpo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"llamar\",\"open\":\"abrir\",\"_default\":\" predefinido\",\"_as_default\":\" por defecto\",\"copy\":\"copiar\"},\"de\":{\"open_in_\":\"Öffnen in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"Betreff \",\"body_\":\"Nachricht \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"Anrufen\",\"open\":\"Öffnen\",\"_default\":\" mit Standard\",\"_as_default\":\" mit Standard\",\"copy\":\"kopieren\"},\"fr\":{\"open_in_\":\"Ouvrir dans \",\"cc_\":\"cc \",\"bcc_\":\"cci \",\"subject_\":\"sujet \",\"body_\":\"contenu \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"appeler\",\"open\":\"Ouvrir\",\"_default\":\" par défaut\",\"_as_default\":\" par défaut\",\"copy\":\"Copier\"}}}");
+module.exports = JSON.parse("{\"languages\":[\"en\",\"it\",\"es\",\"de\",\"fr\"],\"translations\":{\"en\":{\"open_in_\":\"open in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"subject \",\"body_\":\"body \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"call\",\"open\":\"open\",\"_default\":\" default\",\"_as_default\":\" as default\",\"copy\":\"copy\"},\"it\":{\"open_in_\":\"apri con \",\"cc_\":\"cc \",\"bcc_\":\"ccn \",\"subject_\":\"oggetto \",\"body_\":\"testo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"chiama\",\"open\":\"apri\",\"_default\":\" \",\"_as_default\":\" \",\"copy\":\"copia\"},\"es\":{\"open_in_\":\"abrir con \",\"cc_\":\"cc \",\"bcc_\":\"cco \",\"subject_\":\"asunto \",\"body_\":\"cuerpo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"llamar\",\"open\":\"abrir\",\"_default\":\" predefinido\",\"_as_default\":\" por defecto\",\"copy\":\"copiar\"},\"de\":{\"open_in_\":\"Öffnen in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"Betreff \",\"body_\":\"Nachricht \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"Anrufen\",\"open\":\"Öffnen\",\"_default\":\" mit Standard\",\"_as_default\":\" mit Standard\",\"copy\":\"kopieren\"},\"fr\":{\"open_in_\":\"Ouvrir dans \",\"cc_\":\"cc \",\"bcc_\":\"cci \",\"subject_\":\"sujet \",\"body_\":\"contenu \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"Appeler\",\"open\":\"Ouvrir\",\"_default\":\" par défaut\",\"_as_default\":\" par défaut\",\"copy\":\"Copier\"}}}");
 
 /***/ }),
 /* 1 */
@@ -280,7 +280,7 @@ var tel = "",
     telegramUsername = "",
     skypeUsername = ""; // the DOM elements
 
-var title, titleTel, detailCc, detailBcc, detailSubject, detailBody, ccValue, bccValue, subjectValue, bodyValue; // mailgo buttons (actions)
+var title, titleTel, detailCc, detailBcc, detailSubject, detailBody, ccValue, bccValue, subjectValue, bodyValue, activatedLink; // mailgo buttons (actions)
 
 var gmail, outlook, mailgo_open, telegram, wa, skype, call, copyMail, copyTel;
 /**
@@ -320,7 +320,10 @@ var mailgo_mailgoInit = function mailgoInit() {
     modalMailto = createElement();
     modalMailto.style.display = "none";
     modalMailto.id = "mailgo";
-    modalMailto.classList.add("m-modal"); // if dark is in config
+    modalMailto.classList.add("m-modal");
+    modalMailto.setAttribute("role", "dialog");
+    modalMailto.setAttribute("tabindex", "-1");
+    modalMailto.setAttribute("aria-labelledby", "m-title"); // if dark is in config
 
     if ((_config3 = config) === null || _config3 === void 0 ? void 0 : _config3.dark) {
       enableDarkMode(MAIL_TYPE);
@@ -444,7 +447,10 @@ var mailgo_mailgoInit = function mailgoInit() {
     modalTel = createElement();
     modalTel.style.display = "none";
     modalTel.id = "mailgo-tel";
-    modalTel.classList.add("m-modal"); // if dark is in config
+    modalTel.classList.add("m-modal");
+    modalTel.setAttribute("role", "dialog");
+    modalTel.setAttribute("tabindex", "-1");
+    modalTel.setAttribute("aria-labelledby", "m-tel-title"); // if dark is in config
 
     if ((_config4 = config) === null || _config4 === void 0 ? void 0 : _config4.dark) {
       enableDarkMode(TEL_TYPE);
@@ -962,13 +968,52 @@ var getModalHTMLElement = function getModalHTMLElement() {
 var getModalDisplay = function getModalDisplay() {
   var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
   return getModalHTMLElement(ref).style.display;
-}; // get display value
+}; // set display value
 
 
 var setModalDisplay = function setModalDisplay() {
   var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
   var value = arguments.length > 1 ? arguments[1] : undefined;
-  return getModalHTMLElement(ref).style.display = value;
+  var modal = getModalHTMLElement(ref);
+  modal.style.display = value;
+
+  if (value === 'flex') {
+    // "save" the activated link.
+    activatedLink = document.activeElement;
+    modal.setAttribute('aria-hidden', false); // Focus on the modal container.
+
+    modal.setAttribute('tabindex', "0");
+    modal.focus();
+    setFocusLoop(modal);
+  } else {
+    modal.setAttribute('aria-hidden', true); // focus back the activated link for getting back to the context.
+
+    modal.setAttribute('tabindex', '-1');
+    activatedLink.focus();
+  }
+}; // set focus loop within modal
+
+
+var setFocusLoop = function setFocusLoop(ref) {
+  var modal = ref;
+  modal.querySelector('.m-modal-content a:last-of-type').addEventListener('keydown', leaveLastLink);
+  modal.querySelector('.m-modal-content a:first-of-type').addEventListener('keydown', leaveFirstLink);
+};
+
+var leaveLastLink = function leaveLastLink(e) {
+  // going back to the first link to force looping
+  if (e.code === 'Tab' && e.shiftKey === false) {
+    e.preventDefault();
+    e.target.closest('div').querySelector('a:first-of-type').focus();
+  }
+};
+
+var leaveFirstLink = function leaveFirstLink(e) {
+  // going back to the first link to force looping
+  if (e.code === 'Tab' && e.shiftKey === true) {
+    e.preventDefault();
+    e.target.closest('div').querySelector('a:last-of-type').focus();
+  }
 }; // enable dark mode
 
 

src/mailgo.ts

@@ -65,7 +65,8 @@ let title: HTMLElement,
   ccValue: HTMLElement,
   bccValue: HTMLElement,
   subjectValue: HTMLElement,
-  bodyValue: HTMLElement;
+  bodyValue: HTMLElement,
+  activatedLink: HTMLElement;
 
 // mailgo buttons (actions)
 let gmail: HTMLLinkElement,
@@ -115,6 +116,9 @@ const mailgoInit = (): void => {
     modalMailto.style.display = "none";
     modalMailto.id = "mailgo";
     modalMailto.classList.add("m-modal");
+    modalMailto.setAttribute("role", "dialog");
+    modalMailto.setAttribute("tabindex", "-1");
+    modalMailto.setAttribute("aria-labelledby", "m-title");
 
     // if dark is in config
     if (config?.dark) {
@@ -269,6 +273,9 @@ const mailgoInit = (): void => {
     modalTel.style.display = "none";
     modalTel.id = "mailgo-tel";
     modalTel.classList.add("m-modal");
+    modalTel.setAttribute("role", "dialog");
+    modalTel.setAttribute("tabindex", "-1");
+    modalTel.setAttribute("aria-labelledby", "m-tel-title");
 
     // if dark is in config
     if (config?.dark) {
@@ -882,9 +889,51 @@ const getModalHTMLElement = (type: string = MAIL_TYPE) =>
 const getModalDisplay = (ref: string = MAIL_TYPE): string =>
   getModalHTMLElement(ref).style.display;
 
-// get display value
+// set display value
-const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string =>
+const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string => {
-  (getModalHTMLElement(ref).style.display = value);
+  let modal = getModalHTMLElement(ref);
+  modal.style.display = value;
+
+  if ( value === 'flex' ) {
+    // "save" the activated link.
+    activatedLink = document.activeElement;
+    modal.setAttribute('aria-hidden', false);
+
+    // Focus on the modal container.
+    modal.setAttribute('tabindex', "0");
+    modal.focus();
+    setFocusLoop(modal);
+  } else {
+    modal.setAttribute('aria-hidden', true);
+
+    // focus back the activated link for getting back to the context.
+    modal.setAttribute('tabindex', '-1');
+    activatedLink.focus();
+  }
+}
+
+// set focus loop within modal
+const setFocusLoop = (ref: HTMLElement): string => {
+  let modal = ref;
+  modal.querySelector('.m-modal-content a:last-of-type').addEventListener('keydown', leaveLastLink);
+  modal.querySelector('.m-modal-content a:first-of-type').addEventListener('keydown', leaveFirstLink);
+}
+
+const leaveLastLink = (e): void => {
+  // going back to the first link to force looping
+  if ( e.code === 'Tab' && e.shiftKey === false ) {
+    e.preventDefault();
+    e.target.closest('div').querySelector('a:first-of-type').focus();
+  }
+}
+
+const leaveFirstLink = (e): void => {
+  // going back to the first link to force looping
+  if ( e.code === 'Tab' && e.shiftKey === true ) {
+    e.preventDefault();
+    e.target.closest('div').querySelector('a:last-of-type').focus();
+  }
+}
 
 // enable dark mode
 const enableDarkMode = (type: string = MAIL_TYPE) =>