OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix double handling of native inputs wrapped for aria menus 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-06 10:41:35 +01:00
parent 823ada374d
commit 66ca095706
1 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/structures/ContextMenu.js
View File

@ -425,17 +425,25 @@ MenuItemCheckbox.propTypes = {
// Semantic component for representing a styled role=menuitemcheckbox // Semantic component for representing a styled role=menuitemcheckbox
export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, checked, disabled=false, ...props}) => { export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, checked, disabled=false, ...props}) => {
const onKeyDown = (ev) => { const onKeyDown = (e) => {
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12 if (e.key === Key.ENTER || e.key === Key.SPACE) {
if (ev.key === Key.ENTER || ev.key === Key.SPACE) { e.stopPropagation();
ev.preventDefault(); e.preventDefault();
ev.stopPropagation(); onChange();
onChange(ev); // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
if (ev.key === Key.ENTER) { if (e.key === Key.ENTER) {
onClose(); onClose();
} }
} }
}; };
const onKeyUp = (e) => {
// prevent the input default handler as we handle it on keydown to match
// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
if (e.key === Key.SPACE || e.key === Key.ENTER) {
e.stopPropagation();
e.preventDefault();
}
};
return ( return (
<StyledCheckbox <StyledCheckbox
{...props} {...props}
@ -447,6 +455,7 @@ export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, chec
aria-label={label} aria-label={label}
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
> >
{ children } { children }
</StyledCheckbox> </StyledCheckbox>
@ -482,17 +491,25 @@ MenuItemRadio.propTypes = {
// Semantic component for representing a styled role=menuitemradio // Semantic component for representing a styled role=menuitemradio
export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked=false, disabled=false, ...props}) => { export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked=false, disabled=false, ...props}) => {
const onKeyDown = (ev) => { const onKeyDown = (e) => {
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12 if (e.key === Key.ENTER || e.key === Key.SPACE) {
if (ev.key === Key.ENTER || ev.key === Key.SPACE) { e.stopPropagation();
ev.preventDefault(); e.preventDefault();
ev.stopPropagation(); onChange();
onChange(ev); // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
if (ev.key === Key.ENTER) { if (e.key === Key.ENTER) {
onClose(); onClose();
} }
} }
}; };
const onKeyUp = (e) => {
// prevent the input default handler as we handle it on keydown to match
// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
if (e.key === Key.SPACE || e.key === Key.ENTER) {
e.stopPropagation();
e.preventDefault();
}
};
return ( return (
<StyledRadioButton <StyledRadioButton
{...props} {...props}
@ -504,6 +521,7 @@ export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked
aria-label={label} aria-label={label}
onChange={onChange} onChange={onChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
> >
{ children } { children }
</StyledRadioButton> </StyledRadioButton>