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): Manual accessibility updates #861

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

chore(form-field-text-like): Manual accessibility updates #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e15aefb
chore(form-field-text-like): Manual accessibility updates
jason-evans-genesys Jan 28, 2025
2519013
chore(form-field-text-like): Fixed snapshot test
jason-evans-genesys Jan 28, 2025
f9ba0d3
chore(form-field-text-like): Snapshot fix
jason-evans-genesys Jan 29, 2025
39987a0
chore(form-field-text-like): Fixed snap test issue with error state
jason-evans-genesys Jan 30, 2025
aa122f4
chore(form-field-text-like): Merged main into branch
jason-evans-genesys Jan 30, 2025
b766231
chore(form-field-text-like): Fixing snap file
jason-evans-genesys Jan 30, 2025
94632d8
chore(form-field-text-like): Refactoring loading validation
jason-evans-genesys Jan 30, 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
2 changes: 1 addition & 1 deletion ...ys-spark-components/src/components/beta/gux-form/tests/__snapshots__/gux-form.e2e.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`gux-form #render should render as expected (1) 1`] = `"<gux-form-beta hydrated=""><template shadowrootmode="open"><slot></slot></template> <form> <header> <gux-form-heading hydrated=""><h1 slot="heading">Form Heading</h1></gux-form-heading> <gux-form-description hydrated=""><p slot="description"> This is a simple paragraph to accompany the form header. </p></gux-form-description> </header> <fieldset> <legend> <gux-form-fieldset-heading hydrated=""><h2 slot="heading">Form Fieldset Header</h2> </gux-form-fieldset-heading> <gux-form-description hydrated=""><p slot="description"> This is a simple paragraph to accompany the fieldset header. </p></gux-form-description> </legend> <gux-form-field-text-like label-position="above" hydrated=""> <input slot="input" type="text" name="lp-3" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-text-like> <gux-form-field-phone label-position="above" hydrated=""> <gux-phone-input-beta id="gux-form-field-input-i" hydrated=""></gux-phone-input-beta> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-phone> <gux-form-field-textarea label-position="above" hydrated=""> <textarea slot="input" name="textarea" id="gux-form-field-input-i"></textarea> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-textarea> </fieldset> <gux-form-field-text-like label-position="above" hydrated=""> <input slot="input" type="text" name="lp-3" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-text-like> <gux-form-footer placement="page-desktop" class="gux-form-footer-page-desktop" hydrated=""> <footer> <gux-button accent="primary" hydrated="">Primary</gux-button> <gux-button accent="secondary" hydrated="">Secondary</gux-button> </footer> </gux-form-footer> </form> </gux-form-beta>"`;
exports[`gux-form #render should render as expected (1) 1`] = `"<gux-form-beta hydrated=""><template shadowrootmode="open"><slot></slot></template> <form> <header> <gux-form-heading hydrated=""><h1 slot="heading">Form Heading</h1></gux-form-heading> <gux-form-description hydrated=""><p slot="description"> This is a simple paragraph to accompany the form header. </p></gux-form-description> </header> <fieldset> <legend> <gux-form-fieldset-heading hydrated=""><h2 slot="heading">Form Fieldset Header</h2> </gux-form-fieldset-heading> <gux-form-description hydrated=""><p slot="description"> This is a simple paragraph to accompany the fieldset header. </p></gux-form-description> </legend> <gux-form-field-text-like label-position="above" hydrated=""> <input slot="input" type="text" name="lp-3" id="gux-form-field-input-i" aria-describedby="gux-radial-loading-i gux-radial-loading-i"> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-text-like> <gux-form-field-phone label-position="above" hydrated=""> <gux-phone-input-beta id="gux-form-field-input-i" hydrated=""></gux-phone-input-beta> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-phone> <gux-form-field-textarea label-position="above" hydrated=""> <textarea slot="input" name="textarea" id="gux-form-field-input-i"></textarea> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-textarea> </fieldset> <gux-form-field-text-like label-position="above" hydrated=""> <input slot="input" type="text" name="lp-3" id="gux-form-field-input-i" aria-describedby="gux-radial-loading-i gux-radial-loading-i"> <label slot="label" for="gux-form-field-input-i">Fieldset Form field label</label> </gux-form-field-text-like> <gux-form-footer placement="page-desktop" class="gux-form-footer-page-desktop" hydrated=""> <footer> <gux-button accent="primary" hydrated="">Primary</gux-button> <gux-button accent="secondary" hydrated="">Secondary</gux-button> </footer> </gux-form-footer> </form> </gux-form-beta>"`;
2 changes: 1 addition & 1 deletion ...-text-editor-action-link/tests/__snapshots__/gux-rich-text-editor-action-link.e2e.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`gux-rich-text-editor-action-link #render should display component as expected (1) 1`] = `"<gux-rich-text-editor-action-link hydrated=""><template shadowrootmode="open"><gux-button-slot icon-only="" accent="ghost" aria-describedby="gux-tooltip-i" hydrated=""><button id="popover-target" type="button" aria-label="Link" aria-haspopup="true" aria-expanded="false" aria-pressed="false"><gux-icon icon-name="fa/link-simple-regular" size="small" hydrated=""></gux-icon></button><gux-tooltip-beta id="gux-tooltip-i" hydrated=""><div slot="content">Link</div></gux-tooltip-beta></gux-button-slot><gux-popover hydrated=""><div class="gux-popover-content-wrapper"><gux-form-field-text-like hydrated=""><input id="textToDisplay" slot="input" type="text"><label slot="label" for="textToDisplay">Text to display</label></gux-form-field-text-like><gux-form-field-text-like hydrated=""><input slot="input" type="text" id="gux-form-field-input-i"><label slot="label" for="gux-form-field-input-i">Link Address</label></gux-form-field-text-like><gux-cta-group hydrated=""><gux-button slot="primary" hydrated="">Insert</gux-button><gux-button slot="dismiss" hydrated="">Cancel</gux-button></gux-cta-group></div></gux-popover></template></gux-rich-text-editor-action-link>"`;
exports[`gux-rich-text-editor-action-link #render should display component as expected (1) 1`] = `"<gux-rich-text-editor-action-link hydrated=""><template shadowrootmode="open"><gux-button-slot icon-only="" accent="ghost" aria-describedby="gux-tooltip-i" hydrated=""><button id="popover-target" type="button" aria-label="Link" aria-haspopup="true" aria-expanded="false" aria-pressed="false"><gux-icon icon-name="fa/link-simple-regular" size="small" hydrated=""></gux-icon></button><gux-tooltip-beta id="gux-tooltip-i" hydrated=""><div slot="content">Link</div></gux-tooltip-beta></gux-button-slot><gux-popover hydrated=""><div class="gux-popover-content-wrapper"><gux-form-field-text-like hydrated=""><input id="textToDisplay" slot="input" type="text" aria-describedby="gux-radial-loading-i gux-radial-loading-i"><label slot="label" for="textToDisplay">Text to display</label></gux-form-field-text-like><gux-form-field-text-like hydrated=""><input slot="input" type="text" id="gux-form-field-input-i" aria-describedby="gux-radial-loading-i gux-radial-loading-i"><label slot="label" for="gux-form-field-input-i">Link Address</label></gux-form-field-text-like><gux-cta-group hydrated=""><gux-button slot="primary" hydrated="">Insert</gux-button><gux-button slot="dismiss" hydrated="">Cancel</gux-button></gux-cta-group></div></gux-popover></template></gux-rich-text-editor-action-link>"`;
6 changes: 3 additions & 3 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 @@ -53,7 +53,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (1)
<label for="gux-form-field-input-i" slot="label">
Page 0 of 0
</label>
<input id="gux-form-field-input-i" slot="input" type="text" value="0">
<input aria-describedby="gux-radial-loading-i" id="gux-form-field-input-i" slot="input" type="text" value="0">
</gux-form-field-text-like>
</div>
<div>
Expand Down Expand Up @@ -129,7 +129,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (2)
<label for="gux-form-field-input-i" slot="label">
Page 1 of 10
</label>
<input id="gux-form-field-input-i" slot="input" type="text" value="1">
<input aria-describedby="gux-radial-loading-i" id="gux-form-field-input-i" slot="input" type="text" value="1">
</gux-form-field-text-like>
</div>
<div>
Expand Down Expand Up @@ -205,7 +205,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (3)
<label for="gux-form-field-input-i" slot="label">
Page 5 of 10
</label>
<input id="gux-form-field-input-i" slot="input" type="text" value="5">
<input aria-describedby="gux-radial-loading-i" id="gux-form-field-input-i" slot="input" type="text" value="5">
</gux-form-field-text-like>
</div>
<div>
Expand Down
12 changes: 10 additions & 2 deletions ...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 @@ -34,10 +34,12 @@ import {
getComputedLabelPosition,
validateFormIds,
setSlotAriaDescribedby,
getSlottedInput
getSlottedInput,
validateLoadingElement
} from '../../gux-form-field.service';
import { trackComponent } from '@utils/tracking/usage';
import { focusInputElement } from '@utils/dom/focus-input-element';
import { randomHTMLId } from '@utils/dom/random-html-id';

/**
* @slot input - Required slot for input tag
Expand All @@ -60,6 +62,7 @@ export class GuxFormFieldTextLike {
private disabledObserver: MutationObserver;
private requiredObserver: MutationObserver;
private hideLabelInfoTimeout: ReturnType<typeof setTimeout>;
private loadingElementId = randomHTMLId('gux-radial-loading');

@Element()
private root: HTMLElement;
Expand Down Expand Up @@ -153,7 +156,10 @@ export class GuxFormFieldTextLike {
private renderRadialLoading(): JSX.Element {
if (this.loading) {
return (
<gux-radial-loading context="input"></gux-radial-loading>
<gux-radial-loading
id={this.loadingElementId}
context="input"
></gux-radial-loading>
) as JSX.Element;
}
}
Expand Down Expand Up @@ -281,6 +287,8 @@ export class GuxFormFieldTextLike {
);

validateFormIds(this.root, this.input);

validateLoadingElement(this.input, this.loadingElementId);
}

private setLabel(): void {
Expand Down
Loading