Skip to content

feat(toast): add htmlAttributes property for passing attributes to buttons #27855

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

Merged
merged 7 commits into from
Jul 31, 2023
Merged

feat(toast): add htmlAttributes property for passing attributes to buttons #27855

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
aa7ecd0
feat(toast): add htmlAttributes property to buttons in a toast
brandyscarney Jul 25, 2023
e1c2dc1
test(toast): add test for passing aria-label in htmlAttributes
brandyscarney Jul 25, 2023
30b5a7f
test(toast): rename test to include aria-label
brandyscarney Jul 25, 2023
380e893
style: lint
brandyscarney Jul 25, 2023
9bee5f6
test(toast): set aria label as a string
brandyscarney Jul 26, 2023
820b5a9
test(toast): consistent didPresent naming with other a11y tests
brandyscarney Jul 26, 2023
353d2b9
test(toast): use toHaveAttribute for checking attributes
brandyscarney Jul 27, 2023
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
19 changes: 19 additions & 0 deletions core/src/components/toast/test/a11y/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,32 @@ <h1 style="background-color: white">Toast - a11y</h1>
Present Controller Toast
</ion-button>

<ion-button id="aria-label-toast-trigger">Present Aria Label Toast</ion-button>
<ion-toast
id="aria-label-toast"
trigger="aria-label-toast-trigger"
header="Aria Label Toast Header"
message="Aria Label Toast Message"
></ion-toast>

<ion-button onclick="updateContent()">Update Inner Content</ion-button>
</main>
</ion-app>
<script>
const inlineToast = document.querySelector('#inline-toast');
inlineToast.buttons = ['Ok'];

const ariaLabelToast = document.querySelector('#aria-label-toast');
ariaLabelToast.buttons = [
{
icon: 'close',
htmlAttributes: {
'aria-label': 'close button',
'aria-labelledby': 'close-label',
},
},
];

const presentToast = async (opts) => {
const toast = await toastController.create(opts);

Expand Down
22 changes: 18 additions & 4 deletions core/src/components/toast/test/a11y/toast.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
await page.goto(`/src/components/toast/test/a11y`, config);
});
test('should not have any axe violations with inline toasts', async ({ page }) => {
const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
const didPresent = await page.spyOnEvent('ionToastDidPresent');

await page.click('#inline-toast-trigger');
await ionToastDidPresent.next();
await didPresent.next();

/**
* IonToast overlays the entire screen, so
Expand All @@ -25,10 +25,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
expect(results.violations).toEqual([]);
});
test('should not have any axe violations with controller toasts', async ({ page }) => {
const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
const didPresent = await page.spyOnEvent('ionToastDidPresent');

await page.click('#controller-toast-trigger');
await ionToastDidPresent.next();
await didPresent.next();

/**
* IonToast overlays the entire screen, so
Expand All @@ -38,5 +38,19 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
expect(results.violations).toEqual([]);
});

test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
page,
}) => {
const didPresent = await page.spyOnEvent('ionToastDidPresent');

await page.click('#aria-label-toast-trigger');
await didPresent.next();

const toastButton = page.locator('#aria-label-toast .toast-button');

await expect(toastButton).toHaveAttribute('aria-labelledby', 'close-label');
await expect(toastButton).toHaveAttribute('aria-label', 'close button');
});
});
});
1 change: 1 addition & 0 deletions core/src/components/toast/toast-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface ToastButton {
side?: 'start' | 'end';
role?: 'cancel' | string;
cssClass?: string | string[];
htmlAttributes?: { [key: string]: any };
handler?: () => boolean | void | Promise<boolean | void>;
}

Expand Down
9 changes: 8 additions & 1 deletion core/src/components/toast/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,14 @@ export class Toast implements ComponentInterface, OverlayInterface {
return (
<div class={buttonGroupsClasses}>
{buttons.map((b) => (
<button type="button" class={buttonClass(b)} tabIndex={0} onClick={() => this.buttonClick(b)} part="button">
<button
{...b.htmlAttributes}
type="button"
class={buttonClass(b)}
tabIndex={0}
onClick={() => this.buttonClick(b)}
part="button"
>
<div class="toast-button-inner">
{b.icon && (
<ion-icon
Expand Down