Open aardrian opened 12 months ago
When navigating the chart view via keyboard I cannot put focus on nor activate the "Compare Data" control.
Tab↹
The chart is made up of this elided HTML:
<div onclick="[…]"> <span […] data-state="closed" onclick="[…]"> <svg […]> […] </svg> <span class="sr-only"> Compare Data </span> </span> </div>
Note there is a click handler on the wrapper <div> and another on the nested <span>.
<div>
<span>
Also note that the nested <span> has a data-state attribute, which itself has no meaning to browsers.
data-state
Also also note that the SVG is not hidden from AT.
The code as shown violates the following WCAG 2.1 Success Criteria:
Consider merging the <div> and <span> into a <button>. This will get you keyboard support for free and you can keep the click handlers.
<button>
For the nested SVG, add aria-hidden="true" so it is not exposed to screen readers.
aria-hidden="true"
Instead of the data-state attribute, consider adding aria-haspopup="dialog" to the <button>, as support is improving now that NVDA has a fix coming.
aria-haspopup="dialog"
Describe the bug
When navigating the chart view via keyboard I cannot put focus on nor activate the "Compare Data" control.
Browser
Steps to reproduce the bug
Tab↹
, or any other key to get to the "Compare Data" control.Expected Behavior
Tab↹
to the "Compare Data" control.Actual Behavior
Tab↹
to the "Compare Data" control.Related code
The chart is made up of this elided HTML:
Note there is a click handler on the wrapper
<div>
and another on the nested<span>
.Also note that the nested
<span>
has adata-state
attribute, which itself has no meaning to browsers.Also also note that the SVG is not hidden from AT.
Additional Context
The code as shown violates the following WCAG 2.1 Success Criteria:
Consider merging the
<div>
and<span>
into a<button>
. This will get you keyboard support for free and you can keep the click handlers.For the nested SVG, add
aria-hidden="true"
so it is not exposed to screen readers.Instead of the
data-state
attribute, consider addingaria-haspopup="dialog"
to the<button>
, as support is improving now that NVDA has a fix coming.