odit/mailymaily
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Accessibility Improvement

Browse Source 
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:
Geoffrey Crofte 2020-07-24 10:21:11 +02:00
parent c5b1acfd26
commit 30289affd9
8 changed files with 110 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mailgo.dark.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.dark.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
i18n/i18n.json
View File

@ -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",

57
lib/mailgo.js
View File

@ -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

2
lib/mailgo.js.map
View File

File diff suppressed because one or more lines are too long

57
src/mailgo.ts
View File

@ -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) =>