feat(Menu): Accessibility - move MenuItem onClick handler from li to a

[miroslavstastny]

MenuItem

Move onClick handler from <li> to <a> for the menu to be accessible.

Closes #44

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

[codecov]

Codecov Report

Merging #61 into master will decrease coverage by 0.02%.
The diff coverage is 75%.

@@            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

Impacted Files	Coverage Δ
src/components/Menu/MenuItem.tsx	100% <ø> (ø)	⬆️
src/themes/teams/components/Menu/menuItemStyles.ts	83.33% <75%> (-0.54%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 167bf51...bd0dee9. Read the comment docs.

[kuzhelov]

shouldn't it be in relative units (rem) as well?

[kuzhelov]

seems that relative units should be used here

[kuzhelov]

pxToRem for 8px?

[kolaps33]

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#

1. 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.

2. 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)

3. 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);
}