diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-10-31 10:27:20 +0100 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-10-31 12:49:58 +0100 |
commit | 2b134ff7a986eb97f8ec360321be284a7a8ea11e (patch) | |
tree | 0ff579909b402db5916b66ec7bc7469534881a15 /client/lib/accessibility.js | |
parent | 3507c6565bb16b5f45c6f269f7376902f8b1ff37 (diff) | |
parent | 41b23f88aea0f421226f92b081cdb1b61c64bde4 (diff) | |
download | wekan-2b134ff7a986eb97f8ec360321be284a7a8ea11e.tar.gz wekan-2b134ff7a986eb97f8ec360321be284a7a8ea11e.tar.bz2 wekan-2b134ff7a986eb97f8ec360321be284a7a8ea11e.zip |
Merge branch 'devel' into minicard-editor
Conflicts:
client/components/lists/listBody.js
Diffstat (limited to 'client/lib/accessibility.js')
-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..52b771d4 --- /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); +}; |