mirror of
https://github.com/wekan/wekan.git
synced 2025-04-23 13:37:09 -04: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