Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add presentation slide text for screen readers #10296

Merged
merged 1 commit into from Aug 20, 2020
Merged

Add presentation slide text for screen readers #10296

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 19 additions & 0 deletions bigbluebutton-html5/imports/ui/components/presentation/component.jsx
View file
Open in desktop
Expand Up @@ -25,6 +25,18 @@ const intlMessages = defineMessages({
id: 'app.presentation.notificationLabel',
description: 'label displayed in toast when presentation switches',
},
slideContentStart: {
id: 'app.presentation.startSlideContent',
description: 'Indicate the slide content start',
},
slideContentEnd: {
id: 'app.presentation.endSlideContent',
description: 'Indicate the slide content end',
},
noSlideContent: {
id: 'app.presentation.emptySlideContent',
description: 'No content available for slide',
},
});

const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen;
Expand Down Expand Up @@ -390,6 +402,7 @@ class PresentationArea extends PureComponent {
// renders the whole presentation area
renderPresentationArea(svgDimensions, viewBoxDimensions) {
const {
intl,
podId,
currentSlide,
slidePosition,
Expand All @@ -412,6 +425,7 @@ class PresentationArea extends PureComponent {

const {
imageUri,
content,
} = currentSlide;

let viewBoxPosition;
Expand Down Expand Up @@ -439,6 +453,10 @@ class PresentationArea extends PureComponent {
const svgViewBox = `${viewBoxPosition.x} ${viewBoxPosition.y} `
+ `${viewBoxDimensions.width} ${Number.isNaN(viewBoxDimensions.height) ? 0 : viewBoxDimensions.height}`;

const slideContent = content ? `${intl.formatMessage(intlMessages.slideContentStart)}
${content}
${intl.formatMessage(intlMessages.slideContentEnd)}` : intl.formatMessage(intlMessages.noSlideContent);

return (
<div
style={{
Expand All @@ -448,6 +466,7 @@ class PresentationArea extends PureComponent {
textAlign: 'center',
}}
>
<span id="currentSlideText" className={styles.visuallyHidden}>{slideContent}</span>
{this.renderPresentationClose()}
{this.renderPresentationDownload()}
{this.renderPresentationFullscreen()}
Expand Down