mirror of
https://github.com/wekan/wekan.git
synced 2025-12-18 00:10:13 +01:00
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:
parent
1bf9e65571
commit
3f7df340e1
1 changed files with 41 additions and 0 deletions
41
client/lib/accessibility.js
Normal file
41
client/lib/accessibility.js
Normal 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);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue