improve screen reader panel check

This commit is contained in:
KDSBrowne 2019-05-15 21:13:05 +00:00
parent e9f02a64e8
commit 475e945abc
2 changed files with 8 additions and 40 deletions

View File

@ -54,8 +54,6 @@ const propTypes = {
media: PropTypes.element,
actionsbar: PropTypes.element,
closedCaption: PropTypes.element,
userListIsOpen: PropTypes.bool.isRequired,
chatIsOpen: PropTypes.bool.isRequired,
locale: PropTypes.string,
intl: intlShape.isRequired,
};
@ -81,6 +79,7 @@ class App extends Component {
};
this.handleWindowResize = throttle(this.handleWindowResize).bind(this);
this.enableSRTrap = this.enableSRTrap.bind(this);
}
componentDidMount() {
@ -128,6 +127,11 @@ class App extends Component {
this.setState({ enableResize: shouldEnableResize });
}
enableSRTrap() {
const { openPanel, isPhone } = this.props;
return openPanel !== '' && (isPhone || isLayeredView.matches);
}
renderPanel() {
const { enableResize } = this.state;
const { openPanel } = this.props;
@ -182,30 +186,15 @@ class App extends Component {
const {
media,
intl,
chatIsOpen,
userListIsOpen,
isPhone,
breakoutRoomIsOpen,
pollIsOpen,
waitingUsersIsOpen,
notesIsOpen,
} = this.props;
const enableScreenReaderTrap = (isPhone || isLayeredView.matches)
&& (userListIsOpen
|| chatIsOpen
|| breakoutRoomIsOpen
|| pollIsOpen
|| notesIsOpen
|| waitingUsersIsOpen);
if (!media) return null;
return (
<section
className={styles.media}
aria-label={intl.formatMessage(intlMessages.mediaLabel)}
aria-hidden={enableScreenReaderTrap}
aria-hidden={this.enableSRTrap()}
>
{media}
{this.renderClosedCaption()}
@ -217,30 +206,15 @@ class App extends Component {
const {
actionsbar,
intl,
userListIsOpen,
chatIsOpen,
isPhone,
breakoutRoomIsOpen,
pollIsOpen,
notesIsOpen,
waitingUsersIsOpen,
} = this.props;
const enableScreenReaderTrap = (isPhone || isLayeredView.matches)
&& (userListIsOpen
|| chatIsOpen
|| breakoutRoomIsOpen
|| pollIsOpen
|| notesIsOpen
|| waitingUsersIsOpen);
if (!actionsbar) return null;
return (
<section
className={styles.actionsbar}
aria-label={intl.formatMessage(intlMessages.actionsBarLabel)}
aria-hidden={enableScreenReaderTrap}
aria-hidden={this.enableSRTrap()}
>
{actionsbar}
</section>

View File

@ -95,13 +95,7 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
hasBreakoutRooms: getBreakoutRooms().length > 0,
customStyle: getFromUserSettings('customStyle', false),
customStyleUrl: getFromUserSettings('customStyleUrl', false),
breakoutRoomIsOpen: Session.equals('openPanel', 'breakoutroom'),
pollIsOpen: Session.equals('openPanel', 'poll'),
notesIsOpen: Session.equals('openPanel', 'note'),
waitingUsersIsOpen: Session.equals('openPanel', 'waitingUsersPanel'),
chatIsOpen: Session.equals('openPanel', 'chat'),
openPanel: Session.get('openPanel'),
userListIsOpen: !Session.equals('openPanel', ''),
UserInfo,
notify,
validIOSVersion,