refactor(checkbox, radio-group, select, toggle): update variable

This commit is contained in:
Maria Hutt
2025-11-10 11:12:39 -08:00
parent 7f84e84127
commit 30327560a0
4 changed files with 20 additions and 20 deletions

View File

@@ -127,7 +127,7 @@ export class Checkbox implements ComponentInterface {
*/ */
@State() isInvalid = false; @State() isInvalid = false;
@State() private hintTextID?: string; @State() private hintTextId?: string;
/** /**
* Emitted when the checked property has changed as a result of a user action such as a click. * Emitted when the checked property has changed as a result of a user action such as a click.
@@ -174,7 +174,7 @@ export class Checkbox implements ComponentInterface {
* a higher priority. * a higher priority.
*/ */
Promise.resolve().then(() => { Promise.resolve().then(() => {
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
}); });
} }
}); });
@@ -194,7 +194,7 @@ export class Checkbox implements ComponentInterface {
...inheritAriaAttributes(this.el), ...inheritAriaAttributes(this.el),
}; };
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
} }
disconnectedCallback() { disconnectedCallback() {
@@ -265,7 +265,7 @@ export class Checkbox implements ComponentInterface {
ev.stopPropagation(); ev.stopPropagation();
}; };
private getHintTextID(): string | undefined { private getHintTextId(): string | undefined {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
if (isInvalid && errorText) { if (isInvalid && errorText) {
@@ -336,7 +336,7 @@ export class Checkbox implements ComponentInterface {
<Host <Host
role="checkbox" role="checkbox"
aria-checked={indeterminate ? 'mixed' : `${checked}`} aria-checked={indeterminate ? 'mixed' : `${checked}`}
aria-describedby={this.hintTextID} aria-describedby={this.hintTextId}
aria-invalid={this.isInvalid ? 'true' : undefined} aria-invalid={this.isInvalid ? 'true' : undefined}
aria-labelledby={hasLabelContent ? this.inputLabelId : null} aria-labelledby={hasLabelContent ? this.inputLabelId : null}
aria-label={inheritedAttributes['aria-label'] || null} aria-label={inheritedAttributes['aria-label'] || null}

View File

@@ -29,7 +29,7 @@ export class RadioGroup implements ComponentInterface {
*/ */
@State() isInvalid = false; @State() isInvalid = false;
@State() private hintTextID?: string; @State() private hintTextId?: string;
/** /**
* If `true`, the radios can be deselected. * If `true`, the radios can be deselected.
@@ -156,7 +156,7 @@ export class RadioGroup implements ComponentInterface {
* a higher priority. * a higher priority.
*/ */
Promise.resolve().then(() => { Promise.resolve().then(() => {
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
}); });
} }
}); });
@@ -172,7 +172,7 @@ export class RadioGroup implements ComponentInterface {
} }
componentWillLoad() { componentWillLoad() {
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
} }
disconnectedCallback() { disconnectedCallback() {
@@ -323,7 +323,7 @@ export class RadioGroup implements ComponentInterface {
); );
} }
private getHintTextID(): string | undefined { private getHintTextId(): string | undefined {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
if (isInvalid && errorText) { if (isInvalid && errorText) {
@@ -347,7 +347,7 @@ export class RadioGroup implements ComponentInterface {
<Host <Host
role="radiogroup" role="radiogroup"
aria-labelledby={label ? labelId : null} aria-labelledby={label ? labelId : null}
aria-describedby={this.hintTextID} aria-describedby={this.hintTextId}
aria-invalid={this.isInvalid ? 'true' : undefined} aria-invalid={this.isInvalid ? 'true' : undefined}
onClick={this.onClick} onClick={this.onClick}
class={mode} class={mode}

View File

@@ -87,7 +87,7 @@ export class Select implements ComponentInterface {
*/ */
@State() isInvalid = false; @State() isInvalid = false;
@State() private hintTextID?: string; @State() private?: string;
/** /**
* The text to display on the cancel button. * The text to display on the cancel button.
@@ -332,7 +332,7 @@ export class Select implements ComponentInterface {
* a higher priority. * a higher priority.
*/ */
Promise.resolve().then(() => { Promise.resolve().then(() => {
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
}); });
} }
}); });
@@ -350,7 +350,7 @@ export class Select implements ComponentInterface {
componentWillLoad() { componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']); this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
} }
componentDidLoad() { componentDidLoad() {
@@ -1111,7 +1111,7 @@ export class Select implements ComponentInterface {
aria-label={this.ariaLabel} aria-label={this.ariaLabel}
aria-haspopup="dialog" aria-haspopup="dialog"
aria-expanded={`${isExpanded}`} aria-expanded={`${isExpanded}`}
aria-describedby={this.hintTextID} aria-describedby={this.hintTextId}
aria-invalid={this.isInvalid ? 'true' : undefined} aria-invalid={this.isInvalid ? 'true' : undefined}
aria-required={`${required}`} aria-required={`${required}`}
onFocus={this.onFocus} onFocus={this.onFocus}
@@ -1121,7 +1121,7 @@ export class Select implements ComponentInterface {
); );
} }
private getHintTextID(): string | undefined { private getHintTextId(): string | undefined {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
if (isInvalid && errorText) { if (isInvalid && errorText) {

View File

@@ -56,7 +56,7 @@ export class Toggle implements ComponentInterface {
*/ */
@State() isInvalid = false; @State() isInvalid = false;
@State() private hintTextID?: string; @State() private hintTextId?: string;
/** /**
* The color to use from your application's color palette. * The color to use from your application's color palette.
@@ -214,7 +214,7 @@ export class Toggle implements ComponentInterface {
* a higher priority. * a higher priority.
*/ */
Promise.resolve().then(() => { Promise.resolve().then(() => {
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
}); });
} }
}); });
@@ -270,7 +270,7 @@ export class Toggle implements ComponentInterface {
...inheritAriaAttributes(this.el), ...inheritAriaAttributes(this.el),
}; };
this.hintTextID = this.getHintTextID(); this.hintTextId = this.getHintTextId();
} }
private onStart() { private onStart() {
@@ -393,7 +393,7 @@ export class Toggle implements ComponentInterface {
return this.el.textContent !== ''; return this.el.textContent !== '';
} }
private getHintTextID(): string | undefined { private getHintTextId(): string | undefined {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this; const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
if (isInvalid && errorText) { if (isInvalid && errorText) {
@@ -462,7 +462,7 @@ export class Toggle implements ComponentInterface {
<Host <Host
role="switch" role="switch"
aria-checked={`${checked}`} aria-checked={`${checked}`}
aria-describedby={this.hintTextID} aria-describedby={this.hintTextId}
aria-invalid={this.isInvalid ? 'true' : undefined} aria-invalid={this.isInvalid ? 'true' : undefined}
onClick={this.onClick} onClick={this.onClick}
aria-labelledby={hasLabel ? inputLabelId : null} aria-labelledby={hasLabel ? inputLabelId : null}