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.
This commit is contained in:
parent
c5b1acfd26
commit
30289affd9
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string =>
|
||||
(getModalHTMLElement(ref).style.display = value);
|
||||
// set display value
|
||||
const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string => {
|
||||
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) =>
|
||||
|
|
Loading…
Reference in New Issue