Avoid AccessKey In JSX
ID |
javascript.jsx_no_access_key |
Severity |
high |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
JavaScript |
Tags |
accessibility, jsx, reliability |
Rationale
An accessKey claims a keyboard shortcut from a namespace the page does not own. The combination
that reaches it differs per browser and platform, and whatever it is, it can shadow a shortcut the
browser or the assistive technology already uses — screen readers in particular reserve large parts
of the keyboard, so the shortcut that looks like an accessibility feature is the one most likely to
break navigation for the users it was aimed at. There is no way to discover the mapping from the
page, and no way to avoid the collision from the page either.
<button accessKey="s">Save</button> // FLAW
<div accessKey={key} className="row" /> // FLAW - computed, and just as unsafe
<button onClick={save}>Save</button> // OKThe value is irrelevant, so a computed one is reported too: the collision comes from claiming the key at all, not from which key was claimed.