diff --git a/client/common/IconButton.jsx b/client/common/IconButton.jsx index 8cf732f91..6d022fbd2 100644 --- a/client/common/IconButton.jsx +++ b/client/common/IconButton.jsx @@ -13,7 +13,7 @@ const ButtonWrapper = styled(Button)` `; const IconButton = (props) => { - const { icon, ...otherProps } = props; + const { icon, ariaLabel, ...otherProps } = props; const Icon = icon; return ( @@ -22,17 +22,20 @@ const IconButton = (props) => { iconOnly display={Button.displays.inline} focusable="false" + aria-label={ariaLabel} {...otherProps} /> ); }; IconButton.propTypes = { - icon: PropTypes.func + icon: PropTypes.func, + ariaLabel: PropTypes.string }; IconButton.defaultProps = { - icon: null + icon: null, + ariaLabel: '' }; export default IconButton; diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx index 349d3d170..443a96d22 100644 --- a/client/modules/IDE/components/Header/MobileNav.jsx +++ b/client/modules/IDE/components/Header/MobileNav.jsx @@ -249,7 +249,7 @@ const MobileNav = () => { <Options> <div> <Link to={editorLink}> - <IconButton icon={CrossIcon} /> + <IconButton ariaLabel="Close button" icon={CrossIcon} /> </Link> </div> </Options> @@ -262,7 +262,7 @@ const MobileNav = () => { ) : ( <div> <Link to="/login"> - <IconButton icon={AccountIcon} /> + <IconButton ariaLabel="Login button" icon={AccountIcon} /> </Link> </div> )} @@ -271,7 +271,7 @@ const MobileNav = () => { ) : ( <div> <Link to={editorLink}> - <IconButton icon={EditorIcon} /> + <IconButton ariaLabel="Editor button" icon={EditorIcon} /> </Link> </div> )} @@ -291,8 +291,19 @@ const StuffMenu = () => { return ( <div> - <IconButton icon={AddIcon} {...handlers} /> - <ul className={isOpen ? 'opened' : ''}> + <IconButton + icon={AddIcon} + ariaLabel="Stuff Menu" + aria-controls="stuff-menu" + id="stuff-menu-button" + {...handlers} + /> + <ul + className={isOpen ? 'opened' : ''} + id="stuff-menu" + role="menu" + aria-labelledby="stuff-menu-button" + > <ParentMenuContext.Provider value="stuff"> <NavMenuItem onClick={() => newSketch()}> {t('DashboardView.NewSketch')} @@ -322,8 +333,19 @@ const AccountMenu = () => { return ( <div> - <IconButton icon={AccountIcon} {...handlers} /> - <ul className={isOpen ? 'opened' : ''}> + <IconButton + icon={AccountIcon} + ariaLabel="Account Menu" + aria-controls="more-menu" + id="account-menu-button" + {...handlers} + /> + <ul + className={isOpen ? 'opened' : ''} + id="account-menu" + role="menu" + aria-labelledby="account-menu-button" + > <ParentMenuContext.Provider value="account"> <li className="user">{user.username}</li> <NavMenuItem href={`/${user.username}/sketches`}> @@ -393,8 +415,19 @@ const MoreMenu = () => { </LanguageSelect> </Overlay> )} - <IconButton icon={MoreIcon} {...handlers} /> - <ul className={isOpen ? 'opened' : ''}> + <IconButton + icon={MoreIcon} + ariaLabel="More Menu" + aria-controls="more-menu" + id="more-menu-button" + {...handlers} + /> + <ul + id="more-menu" + className={isOpen ? 'opened' : ''} + role="menu" + aria-labelledby="more-menu-button" + > <ParentMenuContext.Provider value="more"> <b>{t('Nav.File.Title')}</b> <NavMenuItem onClick={newSketch}>{t('Nav.File.New')}</NavMenuItem> diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap index d9140653c..a63f63fb8 100644 --- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap +++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap @@ -316,6 +316,7 @@ exports[`Nav renders dashboard version for mobile 1`] = ` href="/login" > <button + aria-label="Login button" class="c4 c5" display="inline" focusable="false" @@ -332,9 +333,12 @@ exports[`Nav renders dashboard version for mobile 1`] = ` </div> <div> <button + aria-controls="more-menu" + aria-label="More Menu" class="c4 c5" display="inline" focusable="false" + id="more-menu-button" kind="primary" type="button" > @@ -345,7 +349,10 @@ exports[`Nav renders dashboard version for mobile 1`] = ` /> </button> <ul + aria-labelledby="more-menu-button" class="" + id="more-menu" + role="menu" > <b> File @@ -1017,6 +1024,7 @@ exports[`Nav renders editor version for mobile 1`] = ` href="/login" > <button + aria-label="Login button" class="c4 c5" display="inline" focusable="false" @@ -1033,9 +1041,12 @@ exports[`Nav renders editor version for mobile 1`] = ` </div> <div> <button + aria-controls="more-menu" + aria-label="More Menu" class="c4 c5" display="inline" focusable="false" + id="more-menu-button" kind="primary" type="button" > @@ -1046,7 +1057,10 @@ exports[`Nav renders editor version for mobile 1`] = ` /> </button> <ul + aria-labelledby="more-menu-button" class="" + id="more-menu" + role="menu" > <b> File