diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-10-13 19:46:37 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-10-13 19:49:00 +0200 |
commit | 3f7df340e1dea4a48bd17c189ccf61e53c47330a (patch) | |
tree | 7163db7d574e768f1bc504223fae6f59c7c213c3 /client/lib | |
parent | 1bf9e65571e465b8a8c8a0a9a78edbb04f5b59c2 (diff) | |
download | wekan-3f7df340e1dea4a48bd17c189ccf61e53c47330a.tar.gz wekan-3f7df340e1dea4a48bd17c189ccf61e53c47330a.tar.bz2 wekan-3f7df340e1dea4a48bd17c189ccf61e53c47330a.zip |
Set some DOM transformation to fix some of the accessibility issues
See #337 for the complete rationale by @ndarilek -- thank you :)
Closes #338
Diffstat (limited to 'client/lib')
-rw-r--r-- | client/lib/accessibility.js | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/client/lib/accessibility.js b/client/lib/accessibility.js new file mode 100644 index 00000000..64195b81 --- /dev/null +++ b/client/lib/accessibility.js @@ -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); +} |