Merge pull request #3514 from matrix-org/t3chguy/accessibility3

Various ARIA a11y fixes.

Author: t3chguy

src/components/structures/FilePanel.js

@@ -126,11 +126,12 @@ const FilePanel = createReactClass({
  tileShape="file_grid"
  resizeNotifier={this.props.resizeNotifier}
  empty={_t('There are no visible files in this room')}
+ role="tabpanel"
  />
  );
  } else {
  return (
- <div className="mx_FilePanel">
+ <div className="mx_FilePanel" role="tabpanel">
  <Loader />
  </div>
  );

src/components/structures/NotificationPanel.js

@@ -46,12 +46,13 @@ const NotificationPanel = createReactClass({
  showUrlPreview={false}
  tileShape="notif"
  empty={_t('You have no visible notifications')}
+ role="tabpanel"
  />
  );
  } else {
  console.error("No notifTimelineSet available!");
  return (
- <div className="mx_NotificationPanel">
+ <div className="mx_NotificationPanel" role="tabpanel">
  <Loader />
  </div>
  );

src/components/structures/RoomSubList.js

@@ -258,7 +258,7 @@ const RoomSubList = createReactClass({
  const tabindex = this.props.isFiltered ? "0" : "-1";
  return (
  <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
- <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
+ <AccessibleButton onClick={this.onClick} className="mx_RoomSubList_label" tabIndex={tabindex} aria-expanded={!isCollapsed}>
  { chevron }
  <span>{this.props.label}</span>
  { incomingCall }

src/components/views/elements/AccessibleTooltipButton.js

@@ -1,18 +1,19 @@
 /*
- Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
- http://www.apache.org/licenses/LICENSE-2.0
+  http://www.apache.org/licenses/LICENSE-2.0
 
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- */
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -55,7 +56,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
  label={title}
  /> : <div />;
  return (
- <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+ <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
  { tip }
  </AccessibleButton>
  );

src/components/views/groups/GroupMemberInfo.js

@@ -183,7 +183,7 @@ module.exports = createReactClass({
 
  const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
  return (
- <div className="mx_MemberInfo">
+ <div className="mx_MemberInfo" role="tabpanel">
  <GeminiScrollbarWrapper autoshow={true}>
  <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
  <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />

src/components/views/groups/GroupMemberList.js

@@ -222,7 +222,7 @@ export default createReactClass({
  }
 
  return (
- <div className="mx_MemberList">
+ <div className="mx_MemberList" role="tabpanel">
  { inviteButton }
  <GeminiScrollbarWrapper autoshow={true}>
  { joined }

src/components/views/groups/GroupRoomInfo.js

@@ -214,7 +214,7 @@ module.exports = createReactClass({
 
  const groupRoomName = this.state.groupRoom.displayname;
  return (
- <div className="mx_MemberInfo">
+ <div className="mx_MemberInfo" role="tabpanel">
  <GeminiScrollbarWrapper autoshow={true}>
  <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
  <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />

src/components/views/groups/GroupRoomList.js

@@ -153,7 +153,7 @@ export default createReactClass({
  const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
  const TruncatedList = sdk.getComponent("elements.TruncatedList");
  return (
- <div className="mx_GroupRoomList">
+ <div className="mx_GroupRoomList" role="tabpanel">
  { inviteButton }
  <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
  <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}

src/components/views/right_panel/HeaderButton.js

@@ -3,6 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -42,8 +43,8 @@ export default class HeaderButton extends React.Component {
  });
 
  return <AccessibleButton
- aria-label={this.props.title}
- aria-expanded={this.props.isHighlighted}
+ aria-selected={this.props.isHighlighted}
+ role="tab"
  title={this.props.title}
  className={classes}
  onClick={this.onClick}>

src/components/views/right_panel/HeaderButtons.js

@@ -91,7 +91,7 @@ export default class HeaderButtons extends React.Component {
 
  render() {
  // inline style as this will be swapped around in future commits
- return <div className="mx_HeaderButtons">
+ return <div className="mx_HeaderButtons" role="tablist">
  { this.renderButtons() }
  </div>;
  }