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.

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

feat(action-sheet): add htmlAttributes property for passing attributes to buttons #27863

Merged
merged 5 commits into from
Jul 31, 2023
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
test(action-sheet): add tests for htmlAttributes to a11y e2e tests
  • Loading branch information
brandyscarney committed Jul 27, 2023
commit e472fc7b460176aa0cb6ed9b5c4901cc807e68b6
43 changes: 41 additions & 2 deletions core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
Original file line number Diff line number Diff line change
@@ -10,16 +10,43 @@ const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy:
await button.click();
await didPresent.next();

const alert = page.locator('ion-action-sheet');
const actionSheet = page.locator('ion-action-sheet');

/**
* expect().toHaveAttribute() can't check for a null value, so grab and check
* the value manually instead.
*/
const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
const ariaLabelledBy = await actionSheet.getAttribute('aria-labelledby');

expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
};

const testAriaButton = async (
page: E2EPage,
buttonID: string,
expectedAriaLabelledBy: string | null,
expectedAriaLabel: string | null
) => {
const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');

const button = page.locator(`#${buttonID}`);
await button.click();

await didPresent.next();

const actionSheetButton = page.locator('ion-action-sheet .action-sheet-button');

/**
* expect().toHaveAttribute() can't check for a null value, so grab and check
* the value manually instead.
*/
const ariaLabelledBy = await actionSheetButton.getAttribute('aria-labelledby');
brandyscarney marked this conversation as resolved.
Show resolved Hide resolved
expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);

const ariaLabel = await actionSheetButton.getAttribute('aria-label');
expect(ariaLabel).toBe(expectedAriaLabel);
};

configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
test.describe(title('action-sheet: a11y'), () => {
test.beforeEach(async ({ page }) => {
@@ -52,5 +79,17 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
test('should allow for manually specifying aria attributes', async ({ page }) => {
await testAria(page, 'customAria', 'Custom title');
});

test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
page,
}) => {
await testAriaButton(page, 'ariaLabelButton', 'close-label', 'close button');
});

test('should have aria-labelledby and aria-label added to the cancel button when htmlAttributes is set', async ({
page,
}) => {
await testAriaButton(page, 'ariaLabelCancelButton', 'cancel-label', 'cancel button');
});
});
});
37 changes: 37 additions & 0 deletions core/src/components/action-sheet/test/a11y/index.html
Original file line number Diff line number Diff line change
@@ -23,6 +23,10 @@ <h1>Action Sheet - A11y</h1>
<ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
<ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
<ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
<ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
<ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
>Aria Label Cancel Button</ion-button
>
</main>

<script>
@@ -63,6 +67,39 @@ <h1>Action Sheet - A11y</h1>
},
});
}

function presentAriaLabelButton() {
openActionSheet({
header: 'Header',
subHeader: 'Subtitle',
buttons: [
{
text: 'Close',
htmlAttributes: {
ariaLabel: 'close button',
'aria-labelledby': 'close-label',
},
},
],
});
}

function presentAriaLabelCancelButton() {
openActionSheet({
header: 'Header',
subHeader: 'Subtitle',
buttons: [
{
text: 'Cancel',
role: 'cancel',
htmlAttributes: {
ariaLabel: 'cancel button',
'aria-labelledby': 'cancel-label',
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
},
},
],
});
}
</script>
</body>
</html>