improve screen reader panel check
This commit is contained in:
parent
e9f02a64e8
commit
475e945abc
@ -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>
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user