Skip to content

Commit

Permalink
fix(ADA-1751): [TR] ADA Loading play not announced (#968)
Browse files Browse the repository at this point in the history
Please add a detailed description of the change, whether it's an enhancement or a bugfix.
If the PR is related to an open issue please link to it.

Issue:
Screen reader user doesn't have indication on loading state.

Fix:
Adding hidden element that visible only to screen reader. in case loading take more than second, "loading" message will be announced.

Resolves ADA-1751
  • Loading branch information
Tzipi-kaltura authored Dec 30, 2024
1 parent 0105bc7 commit 26f22f4
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 7 deletions.
8 changes: 8 additions & 0 deletions src/components/spinner/_spinner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,11 @@
}
}
}
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
35 changes: 28 additions & 7 deletions src/components/spinner/spinner.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,34 @@
import style from '../../styles/style.scss';
import {h, Component, VNode} from 'preact';
import {h, Component, VNode, RefObject, createRef} from 'preact';
import {Text, withText} from 'preact-i18n';

const COMPONENT_NAME = 'Spinner';

const translates = {
loading: <Text id="spinner.loading">Loading</Text>
};

/**
* Spinner component
*
* @class Spinner
* @example <Spinner />
* @extends {Component}
*/
@withText(translates)
class Spinner extends Component<any, any> {
loadingSpan: RefObject<HTMLElement> = createRef<HTMLElement>();

componentDidMount() {
if (this.loadingSpan.current && getComputedStyle(this.loadingSpan.current).visibility !== 'hidden') {
setTimeout(() => {
if (this.loadingSpan.current) {
this.loadingSpan.current.innerText = this.props.loading;
}
}, 1000);
}
}

/**
* render component
*
Expand All @@ -19,12 +37,15 @@ class Spinner extends Component<any, any> {
*/
render(): VNode<any> {
return (
<div className={style.spinner}>
{Array(8)
.fill(0)
.map((val, i) => (
<span key={i + 1} />
))}
<div>
<div className={style.spinner}>
{Array(8)
.fill(0)
.map((val, i) => (
<span key={i + 1} />
))}
</div>
<span className={style.srOnly} aria-live="assertive" ref={this.loadingSpan}></span>
</div>
);
}
Expand Down
3 changes: 3 additions & 0 deletions translations/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,9 @@
},
"watermark": {
"watermark_alt_text": "Watermark"
},
"spinner": {
"loading": "Loading"
}
}
}

0 comments on commit 26f22f4

Please sign in to comment.