feat(Menu): Accessibility - move MenuItem onClick handler from li to a #61
Conversation
Codecov Report
@@ Coverage Diff @@
## master #61 +/- ##
==========================================
- Coverage 85.92% 85.89% -0.03%
==========================================
Files 74 74
Lines 1101 1106 +5
Branches 216 219 +3
==========================================
+ Hits 946 950 +4
Misses 149 149
- Partials 6 7 +1
Continue to review full report at Codecov.
|
...(shape === 'underlined' && { | ||
paddingBottom: '4px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shouldn't it be in relative units (rem) as well?
color: variables.defaultColor, | ||
paddingBottom: '4px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems that relative units should be used here
color: 'inherit', | ||
display: 'block', | ||
...(shape === 'underlined' | ||
? { padding: '0 0 8px 0' } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pxToRem for 8px?
{...accessibility.attributes.root} | ||
{...rest} | ||
> | ||
<ElementType className={classes.root} {...accessibility.attributes.root} {...rest}> | ||
{childrenExist(children) ? ( | ||
children | ||
) : ( | ||
<a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Retested more keyboard navigation and readers.
I focus on space/enter functionality which should works on the menu item by this spec:
https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
- Enter/Space functionality without the readers:
- link without the "href" attribute doesn't invoke onclick event on enter/space key
- link with href='javascript:void(0)' invoke onclick event on enter key. Spece key doesn't invoke onclick.
- Enter/Space functionality with the readers:
2.1 Google/JAWS
if user navigate in virtual cursor mode then space/enter key invoke onclick event
if user navigate to menu item by tab key then works the same as without screen reader(see section above)
2.2 Edge/Narrator
space/enter key invoke onclick event in scan mode or in normal navigation
2.3 OSX/Ghrome/VoiceOver
space/enter key invoke onclick event when user press Control+Option+Space key. Just enter/Space works the same as without screen reader(see section above)
2.4 Fifefox/NVDA
if user navigate in browse mode then space/enter key invoke onclick event
if user navigate to menu item by tab key then works the same as without screen reader(see section above)
- Then another option is replace link with button. Then tested space/enter key works in each combination. Without reader or with readers.
Note:
in aria example supporting space was done javascript:
// Create simulated mouse event to mimic the behavior of ATs
// and let the event handler handleClick do the housekeeping.
try {
clickEvent = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
}
catch (err) {
if (document.createEvent) {
// DOM Level 3 for IE 9+
clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('click', true, true);
}
}
tgt.dispatchEvent(clickEvent);
}
MenuItem
Move onClick handler from
<li>
to<a>
for the menu to be accessible.Closes #44
TODO