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
export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, checked, disabled=false, ...props}) => {
const onKeyDown = (ev) => {
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
if (ev.key === Key.ENTER || ev.key === Key.SPACE) {
ev.preventDefault();
ev.stopPropagation();
onChange(ev);
if (ev.key === Key.ENTER) {
const onKeyDown = (e) => {
if (e.key === Key.ENTER || e.key === Key.SPACE) {
e.stopPropagation();
e.preventDefault();
onChange();
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
if (e.key === Key.ENTER) {
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 (
<StyledCheckbox
{...props}
@ -447,6 +455,7 @@ export const StyledMenuItemCheckbox = ({children, label, onChange, onClose, chec
aria-label={label}
onChange={onChange}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
>
{ children }
</StyledCheckbox>
@ -482,17 +491,25 @@ MenuItemRadio.propTypes = {
// Semantic component for representing a styled role=menuitemradio
export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked=false, disabled=false, ...props}) => {
const onKeyDown = (ev) => {
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
if (ev.key === Key.ENTER || ev.key === Key.SPACE) {
ev.preventDefault();
ev.stopPropagation();
onChange(ev);
if (ev.key === Key.ENTER) {
const onKeyDown = (e) => {
if (e.key === Key.ENTER || e.key === Key.SPACE) {
e.stopPropagation();
e.preventDefault();
onChange();
// Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
if (e.key === Key.ENTER) {
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 (
<StyledRadioButton
{...props}
@ -504,6 +521,7 @@ export const StyledMenuItemRadio = ({children, label, onChange, onClose, checked
aria-label={label}
onChange={onChange}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
>
{ children }
</StyledRadioButton>