From f65a45a14321510ea0f7ffde45ad1c1255848c8d Mon Sep 17 00:00:00 2001 From: guifu Date: Fri, 27 Apr 2018 20:14:22 +0800 Subject: [PATCH] chore: fix aria-* attirbutes --- src/MenuItem.jsx | 19 ++++++++++++++++--- src/SubMenu.jsx | 15 +++++++++++++-- src/SubPopupMenu.js | 4 ++-- tests/__snapshots__/Menu.spec.js.snap | 21 --------------------- tests/__snapshots__/MenuItem.spec.js.snap | 4 ---- 5 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx index 19e483a6..13f4f4b5 100644 --- a/src/MenuItem.jsx +++ b/src/MenuItem.jsx @@ -145,14 +145,27 @@ export class MenuItem extends React.Component { [this.getSelectedClassName()]: props.isSelected, [this.getDisabledClassName()]: props.disabled, }); - const attrs = { - ...props.attribute, + let attrs = { title: props.title, className, + // set to menuitem by default role: 'menuitem', - 'aria-selected': props.isSelected, 'aria-disabled': props.disabled, + ...props.attribute, }; + + if (props.role === 'option') { + // overwrite to option + attrs = { + ...attrs, + role: 'option', + 'aria-selected': props.isSelected, + } + } else if (attrs.role === 'null') { + // sometimes we want to specify role inside
  • element + //
  • Link
    • would be a good example + delete attrs.role; + } let mouseEvent = {}; if (!props.disabled) { mouseEvent = { diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx index 951fe578..9937fbe2 100644 --- a/src/SubMenu.jsx +++ b/src/SubMenu.jsx @@ -399,7 +399,7 @@ export class SubMenu extends React.Component { component="" transitionAppear={transitionAppear} > - {children} + {children} ); } @@ -448,6 +448,17 @@ export class SubMenu extends React.Component { if (isInlineMode) { style.paddingLeft = props.inlineIndent * props.level; } + + let ariaOwns = {}; + // only set aria-owns when menu is open + // otherwise it would be an invalid aria-owns value + // since corresponding node cannot be found + if (this.props.isOpen) { + ariaOwns = { + 'aria-owns': this._menuId, + } + } + const title = (
    diff --git a/src/SubPopupMenu.js b/src/SubPopupMenu.js index cd3c71f1..0fec13ab 100644 --- a/src/SubPopupMenu.js +++ b/src/SubPopupMenu.js @@ -316,8 +316,8 @@ export class SubPopupMenu extends React.Component { ); const domProps = { className, - role: 'menu', - 'aria-activedescendant': '', + // role could be 'select' and by default set to menu + role: props.role || 'menu', }; if (props.id) { domProps.id = props.id; diff --git a/tests/__snapshots__/Menu.spec.js.snap b/tests/__snapshots__/Menu.spec.js.snap index 241f13d0..d7ada6bb 100644 --- a/tests/__snapshots__/Menu.spec.js.snap +++ b/tests/__snapshots__/Menu.spec.js.snap @@ -2,7 +2,6 @@ exports[`Menu render renders horizontal menu correctly 1`] = `