Set some DOM transformation to fix some of the accessibility issues

See #337 for the complete rationale by @ndarilek -- thank you :)

Closes #338
This commit is contained in:
Maxime Quandalle 2015-10-13 19:46:37 +02:00
parent 1bf9e65571
commit 3f7df340e1

View file

@ -0,0 +1,41 @@
// In this file we define a set of DOM transformations that are specifically
// intended for blind screen readers.
//
// See https://github.com/wekan/wekan/issues/337 for the general accessibility
// considerations.
// Without an href, links are non-keyboard-focusable and are not presented on
// blind screen readers. We default to the empty anchor `#` href.
function enforceHref(attributes) {
if (! _.has(attributes, 'href')) {
attributes.href = '#';
}
return attributes;
}
// `title` is inconsistently used on the web, and is thus inconsistently
// presented by screen readers. `aria-label`, on the other hand, is specific to
// accessibility and is presented in ways that title shouldn't be.
function copyTitleInAriaLabel(attributes) {
if (! _.has(attributes, 'aria-label') && _.has(attributes, 'title')) {
attributes['aria-label'] = attributes.title;
}
return attributes;
}
// XXX Our implementation relies on overwriting Blaze virtual DOM functions,
// which is a little bit hacky -- but still reasonable with our ES6 usage. If we
// end up switching to React we will probably create lower level small
// components to handle that without overwriting any build-in function.
const {
A: superA,
I: superI,
} = HTML;
HTML.A = (attributes, ...others) => {
return superA(copyTitleInAriaLabel(enforceHref(attributes)), ...others);
}
HTML.I = (attributes, ...others) => {
return superI(copyTitleInAriaLabel(attributes), ...others);
}