fix(ADA-1751): [TR] ADA Loading play not announced #968
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
SivanA-Kaltura
requested changes
Dec 22, 2024
src/components/spinner/spinner.tsx
Outdated
| loadingSpan: RefObject<HTMLElement> = createRef<HTMLElement>(); | ||
|
|
||
| componentDidMount() { | ||
| setTimeout(() => { |
There was a problem hiding this comment.
what does the setTimeout do ?
There was a problem hiding this comment.
only if the loading appears more than one second screen reader will announce: "loading" (asked by product)
There was a problem hiding this comment.
two things
- you need to start the timer from the moment the loading is VISIBLE, not mounted
- i didn't understand the use of ref here. is using a boolean not good enough ?
There was a problem hiding this comment.
- I checked it and when the setTimeout is started, loading is already visible.
- need to update the span with the "loading" message if we want the screen reader to announce it immediately. in order to do it need to save the span in ref and update it.
There was a problem hiding this comment.
- i would still add a visibility check. i don't know if you can count on it.
- what happens if you don't use a ref ?
There was a problem hiding this comment.
visibility check was added.
SivanA-Kaltura
requested changes
Dec 23, 2024
src/components/spinner/spinner.tsx
Outdated
| loadingSpan: RefObject<HTMLElement> = createRef<HTMLElement>(); | ||
|
|
||
| componentDidMount() { | ||
| setTimeout(() => { |
There was a problem hiding this comment.
two things
- you need to start the timer from the moment the loading is VISIBLE, not mounted
- i didn't understand the use of ref here. is using a boolean not good enough ?
SivanA-Kaltura
requested changes
Dec 23, 2024
src/components/spinner/spinner.tsx
Outdated
| loadingSpan: RefObject<HTMLElement> = createRef<HTMLElement>(); | ||
|
|
||
| componentDidMount() { | ||
| setTimeout(() => { |
There was a problem hiding this comment.
- i would still add a visibility check. i don't know if you can count on it.
- what happens if you don't use a ref ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of the Changes
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