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

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
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4880c49
chore(form-field-text-like): Added aria-busy to host element
jason-evans-genesys Mar 10, 2025
89310a1
chore(form-field-text-like): Using role status for loading indicator
jason-evans-genesys Mar 10, 2025
1a7c6bd
chore(form-field-text-like): Updated snapshot test
jason-evans-genesys Mar 11, 2025
26b235d
chore(form-field-text-like): Updated tests
jason-evans-genesys Mar 11, 2025
c97d56a
chore(form-field-text-like): Updated test
jason-evans-genesys Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ...acy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (1)
<div class="gux-input-container">
<slot name="prefix"></slot>
<slot name="input"></slot>
<div role="status"></div>
<slot name="suffix"></slot>
</div>
</div>
Expand Down Expand Up @@ -109,6 +110,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (2)
<div class="gux-input-container">
<slot name="prefix"></slot>
<slot name="input"></slot>
<div role="status"></div>
<slot name="suffix"></slot>
</div>
</div>
Expand Down Expand Up @@ -185,6 +187,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (3)
<div class="gux-input-container">
<slot name="prefix"></slot>
<slot name="input"></slot>
<div role="status"></div>
<slot name="suffix"></slot>
</div>
</div>
Expand Down
16 changes: 15 additions & 1 deletion ...nts/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,14 @@ <h2>Examples</h2>
</gux-form-field-text-like>
</fieldset>

<fieldset>
<legend>Loading dynamically set</legend>
<gux-form-field-text-like id="dynamic-loading" loading>
<input slot="input" type="text" name="e-1" />
<label slot="label">Default</label>
</gux-form-field-text-like>
</fieldset>

<fieldset>
<legend>Label Info</legend>
<gux-form-field-text-like loading>
Expand All @@ -232,7 +240,13 @@ <h2>Examples</h2>
</fieldset>
</form>

<style>
<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.

}, 3000);
})()"
>
gux-form-field-text-like {
margin: 10px;
}
Expand Down
2 changes: 1 addition & 1 deletion ...ts/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ export class GuxFormFieldTextLike {
>
<slot name="prefix" />
<slot name="input" />
{this.renderRadialLoading()}
<div role="status">{this.renderRadialLoading()}</div>
<slot name="suffix" />
{this.clearable && this.hasContent && !this.disabled && (
<gux-form-field-input-clear-button
Expand Down
Loading