MM-15982, MM-15984, Minor Accessibility fixes (mattermost#2972)

* MM-15984 - Updating Menu to button * MM-15982 - Updating status icon and dropdown * Updating tests * Updating status translation * Updating aria label for menu icon * Updating labels to lowercase
Revanth47 · Jun 18, 2019 · ad6df81 · ad6df81
1 parent cc3c94d
commit ad6df81
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 71 deletions.
diff --git a/components/__snapshots__/profile_picture.test.jsx.snap b/components/__snapshots__/profile_picture.test.jsx.snap
@@ -12,6 +12,7 @@ exports[`components/ProfilePicture should match snapshot, no user specified, def
  width="36"
  />
  <StatusIcon
+ button={false}
  className=""
  status="away"
  />
@@ -30,6 +31,7 @@ exports[`components/ProfilePicture should match snapshot, no user specified, ove
  width="48"
  />
  <StatusIcon
+ button={false}
  className=""
  status="away"
  />
@@ -48,6 +50,7 @@ exports[`components/ProfilePicture should match snapshot, user specified 1`] = `
  width="36"
  />
  <StatusIcon
+ button={false}
  className=""
  status="away"
  />
@@ -66,6 +69,7 @@ exports[`components/ProfilePicture should match snapshot, user specified, overri
  width="48"
  />
  <StatusIcon
+ button={false}
  className=""
  status="away"
  />

diff --git a/components/main_menu/__snapshots__/main_menu.test.jsx.snap b/components/main_menu/__snapshots__/main_menu.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/Menu should match snapshot with id 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  id="test-id"
  mobile={false}
 >
@@ -325,7 +325,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
 
 exports[`components/Menu should match snapshot with most of the thing disabled 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={false}
 >
  <MenuGroup>
@@ -647,7 +647,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
 
 exports[`components/Menu should match snapshot with most of the thing disabled in mobile 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={true}
 >
  <MenuGroup>
@@ -1051,7 +1051,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
 
 exports[`components/Menu should match snapshot with most of the thing enabled 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={false}
 >
  <MenuGroup>
@@ -1373,7 +1373,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
 
 exports[`components/Menu should match snapshot with most of the thing enabled in mobile 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={true}
 >
  <MenuGroup>
@@ -1777,7 +1777,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
 
 exports[`components/Menu should match snapshot with plugins 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={false}
 >
  <MenuGroup>
@@ -2116,7 +2116,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
 
 exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={true}
 >
  <MenuGroup>

diff --git a/components/main_menu/main_menu.jsx b/components/main_menu/main_menu.jsx
@@ -152,7 +152,7 @@ export default class MainMenu extends React.PureComponent {
  <Menu
  mobile={this.props.mobile}
  id={this.props.id}
- ariaLabel={localizeMessage('navbar_dropdown.menuAriaLabel', 'Main Menu')}
+ ariaLabel={localizeMessage('navbar_dropdown.menuAriaLabel', 'main menu')}
  >
  <MenuGroup>
  <MenuItemAction

diff --git a/components/sidebar/header/sidebar_header_dropdown_button.jsx b/components/sidebar/header/sidebar_header_dropdown_button.jsx
@@ -6,6 +6,7 @@ import React from 'react';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
+import {localizeMessage} from 'utils/utils.jsx';
 import MenuIcon from 'components/svg/menu_icon';
 import Constants from 'utils/constants.jsx';
 
@@ -83,7 +84,10 @@ export default class SidebarHeaderDropdownButton extends React.PureComponent {
  >
  {'@' + this.props.currentUser.username}
  </div>
- <MenuIcon className='sidebar-header-dropdown__icon'/>
+ <MenuIcon
+ className='style--none sidebar-header-dropdown__icon'
+ aria-label={localizeMessage('navbar_dropdown.menuAriaLabel', 'main menu')}
+ />
  </div>
  </OverlayTrigger>
  </div>

diff --git a/...ar_channel_button_or_link/__snapshots__/sidebar_channel_button_or_link_icon.test.jsx.snap b/...ar_channel_button_or_link/__snapshots__/sidebar_channel_button_or_link_icon.test.jsx.snap
@@ -14,6 +14,7 @@ exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOr
 
 exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOrLinkIcon should match snapshot, on direct message 1`] = `
 <StatusIcon
+ button={false}
  className=""
  status="test"
  type="avatar"

diff --git a/components/status_dropdown/status_dropdown.jsx b/components/status_dropdown/status_dropdown.jsx
@@ -121,36 +121,49 @@ export default class StatusDropdown extends React.Component {
  >
  <div className='status-wrapper status-selector'>
  {profilePicture}
- <StatusIcon status={this.props.status}/>
+ <button
+ className='status style--none'
+ aria-label={localizeMessage('status_dropdown.menuAriaLabel', 'set status')}
+ >
+ <StatusIcon
+ status={this.props.status}
+ button={true}
+ />
+ </button>
  <span className={'status status-edit edit'}>
  {dropdownIcon}
  </span>
  </div>
- <Menu ariaLabel={localizeMessage('status_dropdown.menuAriaLabel', 'Change Status Menu')}>
+ <Menu ariaLabel={localizeMessage('status_dropdown.menuAriaLabel', 'set status')}>
  <MenuGroup>
  <MenuItemAction
  show={this.isUserOutOfOffice()}
  onClick={() => null}
+ ariaLabel={localizeMessage('status_dropdown.set_ooo', 'Out of office').toLowerCase()}
  text={localizeMessage('status_dropdown.set_ooo', 'Out of office')}
  extraText={localizeMessage('status_dropdown.set_ooo.extra', 'Automatic Replies are enabled')}
  />
  </MenuGroup>
  <MenuGroup>
  <MenuItemAction
  onClick={setOnline}
+ ariaLabel={localizeMessage('status_dropdown.set_online', 'Online').toLowerCase()}
  text={localizeMessage('status_dropdown.set_online', 'Online')}
  />
  <MenuItemAction
  onClick={setAway}
+ ariaLabel={localizeMessage('status_dropdown.set_away', 'Away').toLowerCase()}
  text={localizeMessage('status_dropdown.set_away', 'Away')}
  />
  <MenuItemAction
  onClick={setDnd}
+ ariaLabel={`${localizeMessage('status_dropdown.set_dnd', 'Do not disturb').toLowerCase()}. ${localizeMessage('status_dropdown.set_dnd.extra', 'Disables Desktop and Push Notifications').toLowerCase()}`}
  text={localizeMessage('status_dropdown.set_dnd', 'Do not disturb')}
  extraText={localizeMessage('status_dropdown.set_dnd.extra', 'Disables Desktop and Push Notifications')}
  />
  <MenuItemAction
  onClick={setOffline}
+ ariaLabel={localizeMessage('status_dropdown.set_offline', 'Offline').toLowerCase()}
  text={localizeMessage('status_dropdown.set_offline', 'Offline')}
  />
  </MenuGroup>

diff --git a/components/status_icon.jsx b/components/status_icon.jsx
@@ -15,23 +15,29 @@ import StatusOnlineIcon from 'components/svg/status_online_icon';
 
 export default class StatusIcon extends React.PureComponent {
  static propTypes = {
+ button: PropTypes.bool,
  status: PropTypes.string,
  className: PropTypes.string,
  type: PropTypes.string,
  };
 
  static defaultProps = {
  className: '',
+ button: false,
  };
 
  render() {
- const {status, type} = this.props;
+ const {button, status, type} = this.props;
 
  if (!status) {
  return null;
  }
 
- const className = 'status ' + this.props.className;
+ let className = 'status ' + this.props.className;
+
+ if (button) {
+ className = this.props.className;
+ }
 
  let IconComponent = 'span';
  if (type === 'avatar') {

diff --git a/components/svg/menu_icon.jsx b/components/svg/menu_icon.jsx
@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 export default class MenuIcon extends React.PureComponent {
  render() {
  return (
- <span {...this.props}>
+ <button {...this.props}>
  <FormattedMessage
  id='generic_icons.menu'
  defaultMessage='Menu Icon'
@@ -44,7 +44,7 @@ export default class MenuIcon extends React.PureComponent {
  </svg>
  )}
  </FormattedMessage>
- </span>
+ </button>
  );
  }
 }
diff --git a/components/widgets/menu/menu_items/menu_item_action.jsx b/components/widgets/menu/menu_items/menu_item_action.jsx
@@ -6,9 +6,10 @@ import PropTypes from 'prop-types';
 
 import menuItem from './menu_item.jsx';
 
-export const MenuItemActionImpl = ({onClick, text, extraText, id}) => (
+export const MenuItemActionImpl = ({onClick, ariaLabel, text, extraText, id}) => (
  <button
  id={id}
+ aria-label={ariaLabel}
  className={'style--none' + (extraText ? ' MenuItem__help' : '')}
  onClick={onClick}
  >
@@ -18,6 +19,7 @@ export const MenuItemActionImpl = ({onClick, text, extraText, id}) => (
 );
 MenuItemActionImpl.propTypes = {
  onClick: PropTypes.func.isRequired,
+ ariaLabel: PropTypes.string,
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  extraText: PropTypes.string,
  id: PropTypes.string,

diff --git a/i18n/en.json b/i18n/en.json
@@ -2544,7 +2544,7 @@
  "navbar_dropdown.logout": "Logout",
  "navbar_dropdown.manageGroups": "Manage Groups",
  "navbar_dropdown.manageMembers": "Manage Members",
- "navbar_dropdown.menuAriaLabel": "Main Menu",
+ "navbar_dropdown.menuAriaLabel": "main menu",
  "navbar_dropdown.nativeApps": "Download Apps",
  "navbar_dropdown.report": "Report a Problem",
  "navbar_dropdown.switchTo": "Switch to ",
@@ -2841,7 +2841,7 @@
  "signup.office365": "Office 365",
  "signup.saml.icon": "SAML Icon",
  "signup.title": "Create an account with:",
- "status_dropdown.menuAriaLabel": "Change Status Menu",
+ "status_dropdown.menuAriaLabel": "set status",
  "status_dropdown.set_away": "Away",
  "status_dropdown.set_dnd": "Do Not Disturb",
  "status_dropdown.set_dnd.extra": "Disables Desktop and Push Notifications",

diff --git a/package-lock.json b/package-lock.json
diff --git a/plugins/test/__snapshots__/main_menu_action.test.jsx.snap b/plugins/test/__snapshots__/main_menu_action.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`plugins/MainMenuActions should match snapshot and click plugin item for main menu 1`] = `
 <Menu
- ariaLabel="Main Menu"
+ ariaLabel="main menu"
  mobile={false}
 >
  <MenuGroup>

diff --git a/sass/components/_sidebar-header-dropdown-button.scss b/sass/components/_sidebar-header-dropdown-button.scss
@@ -4,12 +4,12 @@
  align-items: center;
 
  .header__info {
- @include clearfix;
  @include flex-grow(1);
  color: $white;
  padding: 3px 15px 0 8px;
  position: relative;
  width: 100%;
+
  .team__name {
  font-size: 14px;
  font-weight: 600;
@@ -19,6 +19,7 @@
  text-overflow: ellipsis;
  white-space: nowrap;
  }
+
  .user__name {
  font-weight: 400;
  }

diff --git a/sass/components/_status-icon.scss b/sass/components/_status-icon.scss
@@ -6,6 +6,51 @@
  position: relative;
  align-self: center;
 
+ .sidebar--left & {
+ height: 36px;
+ width: 36px;
+
+ .status {
+ bottom: -5px;
+ height: 19px;
+ right: -6px;
+ width: 19px;
+
+ &.status-edit {
+ .fa {
+ top: 4px;
+ }
+ }
+
+ .fa {
+ position: relative;
+ top: 2px;
+ }
+
+ .icon__container {
+ &:after {
+ border-radius: 20px;
+ content: '';
+ height: 10px;
+ left: 4px;
+ position: absolute;
+ top: 4px;
+ width: 10px;
+ }
+ }
+
+ svg {
+ height: 13px;
+ left: 0;
+ max-height: initial;
+ position: relative;
+ top: 0;
+ width: 13px;
+ z-index: 1;
+ }
+ }
+ }
+
  .status {
  border-radius: 100px;
  bottom: -4px;
@@ -40,16 +85,19 @@
  }
 }
 
-.status-selector:hover > .status {
+.status-selector:hover>.status {
  display: none;
 }
-.status-selector > .status {
+
+.status-selector>.status {
  display: inherit;
 }
-.status-selector > .status-edit {
+
+.status-selector>.status-edit {
  display: none;
 }
-.status-selector:hover > .status-edit {
+
+.status-selector:hover>.status-edit {
  display: inherit;
 }
 

diff --git a/sass/layout/_headers.scss b/sass/layout/_headers.scss
@@ -612,7 +612,6 @@
  }
 
  .header__info {
- @include clearfix;
  @include flex-grow(1);
  color: $white;
  padding: 2px 16px 0 8px;