diff --git a/src/alert/Alert.ts b/src/alert/Alert.ts index d4be5ae27..a0669dd55 100644 --- a/src/alert/Alert.ts +++ b/src/alert/Alert.ts @@ -186,6 +186,7 @@ export class Alert extends OmniElement { element.secondaryAction = init.secondaryAction; element.enableSecondary = init.enableSecondary; element.actionAlign = init.actionAlign; + element.ariaRoleDescription = 'alert' if (init.id) { element.id = init.id; } diff --git a/src/button/Button.spec.ts b/src/button/Button.spec.ts index da2b22b62..d814a1876 100644 --- a/src/button/Button.spec.ts +++ b/src/button/Button.spec.ts @@ -117,6 +117,9 @@ test(`Button - Slot Behaviour`, async ({ page }) => { ); await expect(foundSlottedOmniIconElement.asElement()).toBeTruthy(); + + // Test accessibility by checking what the aria-label is + }); }); @@ -146,3 +149,4 @@ test(`Button - Disabled Behaviour`, async ({ page }) => { await expect(click).toBeCalledTimes(0); }); }); + diff --git a/src/button/Button.stories.ts b/src/button/Button.stories.ts index f82e60eea..978c0abda 100644 --- a/src/button/Button.stories.ts +++ b/src/button/Button.stories.ts @@ -12,6 +12,7 @@ const slotPositionOptions = ['left', 'top', 'right', 'bottom'] as const; interface Args { type: (typeof buttonOptions)[number]; label: string; + altText: string; slotPosition: (typeof slotPositionOptions)[number]; disabled: boolean; '[Default Slot]': string; @@ -23,6 +24,7 @@ export const Interactive = { data-testid="test-button" type="${args.type}" label="${ifNotEmpty(args.label)}" + alt-text="${args.altText}" slot-position="${args.slotPosition}" ?disabled=${args.disabled}> ${unsafeHTML(args['[Default Slot]'])} @@ -80,8 +82,8 @@ const App = () => ;` } as ComponentStoryFormat; export const Slot = { - render: () => html` - + render: (args: Args) => html` + `, @@ -98,7 +100,9 @@ const App = () => ], name: 'Slot', description: 'Set html content to display within.', - args: {} + args: { + altText: 'Direction image' + } } as ComponentStoryFormat; export const Disabled = { diff --git a/src/button/Button.ts b/src/button/Button.ts index 51c2d4087..66226fb07 100644 --- a/src/button/Button.ts +++ b/src/button/Button.ts @@ -154,6 +154,11 @@ export class Button extends OmniElement { */ @property({ type: Boolean, reflect: true }) disabled?: boolean; + /** + * Should be used in cases where a button has no label will map to the aria-label attribute for accessibility purposes. + */ + @property({type: String, reflect: true, attribute: 'alt-text'}) altText?: string; + static override get styles() { return [ super.styles, @@ -430,8 +435,9 @@ export class Button extends OmniElement { [`${this.type}`]: this.type, disabled: this.disabled ?? false })} - ?disabled=${this.disabled} + aria-label="${this.altText ? this.altText : this.label}" aria-disabled=${this.disabled ? 'true' : 'false'} + ?disabled=${this.disabled} tabindex=${this.disabled ? '-1' : '0'}> ${this.label ? html`` : nothing} diff --git a/src/check/Check.ts b/src/check/Check.ts index 622363dd6..8ed936a93 100644 --- a/src/check/Check.ts +++ b/src/check/Check.ts @@ -334,6 +334,8 @@ export class Check extends OmniElement { override render(): TemplateResult { return html`