BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add polite screen reader alert

Browse Source
This commit is contained in:
KDSBrowne 2022-01-23 16:18:09 +00:00
parent 4c4d0d3780
commit 76ac6fe596
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bigbluebutton-html5/client/main.html
View File

@ -127,7 +127,9 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
<!-- fonts -->
</head>
<body style="background-color: #06172A">
<div id="app" role="document"></div>
<div id="aria-polite-alert" aria-live="polite" aria-atomic="false" class="sr-only"></div>
<div id="app" role="document">
</div>
<span id="destination"></span>
<audio id="remote-media" autoplay>
</audio>

4
bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
View File

@ -16,7 +16,7 @@ import SettingsDropdownContainer from './settings-dropdown/container';
import browserInfo from '/imports/utils/browserInfo';
import deviceInfo from '/imports/utils/deviceInfo';
import _ from "lodash";
import {alertScreenReader} from '/imports/utils/dom-utils';
import { politeSRAlert } from '/imports/utils/dom-utils';
import { PANELS, ACTIONS } from '../layout/enums';
const intlMessages = defineMessages({
@ -193,7 +193,7 @@ class NavBar extends Component {
activeChats.map((c, i) => {
if (c?.unreadCounter > 0 && c?.unreadCounter !== acs[i]?.unreadCounter) {
alertScreenReader(`${intl.formatMessage(intlMessages.newMsgAria, { 0: c.name })}`)
politeSRAlert(`${intl.formatMessage(intlMessages.newMsgAria, { 0: c.name })}`)
}
});

11
bigbluebutton-html5/imports/utils/dom-utils.js
View File

@ -1,6 +1,7 @@
const TITLE_WITH_VIEW = 3;
const ARIA_ALERT_TIMEOUT = 3000;
const ARIA_ALERT_EXT_TIMEOUT = 15000;
const getTitleData = () => {
const title = document.getElementsByTagName('title')[0];
@ -37,4 +38,12 @@ export const alertScreenReader = (s = '') => {
}, ARIA_ALERT_TIMEOUT);
};
export default { registerTitleView, unregisterTitleView, alertScreenReader };
export const politeSRAlert = (s = '') => {
const liveArea = document.getElementById('aria-polite-alert')
if (liveArea) liveArea.innerHTML = s;
setTimeout(() => {
if (liveArea) liveArea.innerHTML = '';
}, ARIA_ALERT_EXT_TIMEOUT);
};
export default { registerTitleView, unregisterTitleView, alertScreenReader, politeSRAlert };