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.

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

chore(form-field-text-like): Added role=status for loading indicator #979

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

jason-evans-genesys
Copy link
Collaborator

@jason-evans-genesys jason-evans-genesys commented Mar 10, 2025

✅ Closes: COMUI-3408

I added role="status" around the loading indicator for now so voiceover will pick up when the loading indicator is visible or not.

There is a new ticket to ask UX why we need a loading indicator for all inputs and then also maybe making an API change to slot in the loading indicator element: https://inindca.atlassian.net/browse/COMUI-3539

@jason-evans-genesys jason-evans-genesys self-assigned this Mar 10, 2025
@jason-evans-genesys jason-evans-genesys changed the title chore(form-field-text-like): Added aria-busy to host element chore(form-field-text-like): Added aria-busy to host element (WIP) Mar 10, 2025
Copy link

<style
onload="(function () {
window.setInterval(() => {
document.getElementById('dynamic-loading').toggleAttribute('loading');
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you all think it's not optimal to use setInterval here or does it not matter since it's an example page and I'm trying to demonstrate the loading indicator dynamically showing/hiding so we can see if voiceover picks up on the change?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Were you able to get voiceover to announce the change when it is dynamically showing/hiding? I wasn't able to get my voiceover to read it out

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this will work better if you apply the role="status" to the the gux-radial-loading component within the renderRadialLoading(). Other than that the change LGTM 👍 . Also for voiceover if its role="status" it automatically applies an aria-live of polite which is what is needed here as its not an urgent announcement but a passive one. You have to click on the field for it say Loading on voiceover which is correct I think imo. If you were to use aria-live=assertive it will just say loading regardless of where you are on the page but I dont think we want this as far as I know the assertive should just be used for UI blocking stuff eg loading a page.

@jason-evans-genesys jason-evans-genesys changed the title chore(form-field-text-like): Added aria-busy to host element (WIP) chore(form-field-text-like): Added role=status for loading indicator Mar 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants