javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): buttons are highlighted with VoiceOver (#26180)

Browse Source 
resolves #26156
This commit is contained in:
Liam DeBeasi
2022-10-31 14:02:09 -05:00
committed by GitHub
parent bbbd37bc49
commit 1504b8888d
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/modal/modal.tsx
View File

@ -348,7 +348,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
componentWillLoad() {
const { breakpoints, initialBreakpoint, swipeToClose, el } = this;
this.inheritedAttributes = inheritAttributes(el, ['role']);
this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
/**
* If user has custom ID set then we should
@ -879,11 +879,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
return (
<Host
no-router
aria-modal="true"
role="dialog"
tabindex="-1"
{...(htmlAttributes as any)}
{...inheritedAttributes}
style={{
zIndex: `${20000 + this.overlayIndex}`,
}}
@ -911,7 +908,20 @@ export class Modal implements ComponentInterface, OverlayInterface {
{mode === 'ios' && <div class="modal-shadow"></div>}
<div class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
<div
/*
role and aria-modal must be used on the
same element. They must also be set inside the
shadow DOM otherwise ion-button will not be highlighted
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
*/
role="dialog"
{...inheritedAttributes}
aria-modal="true"
class="modal-wrapper ion-overlay-wrapper"
part="content"
ref={(el) => (this.wrapperEl = el)}
>
{showHandle && (
<button
class="modal-handle"

4
core/src/components/modal/test/a11y/modal.e2e.ts
View File

@ -13,7 +13,7 @@ test.describe('modal: a11y', () => {
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
const button = page.locator('#open-modal');
const modal = page.locator('ion-modal');
const modal = page.locator('ion-modal .modal-wrapper');
await expect(modal).toHaveAttribute('role', 'dialog');
@ -32,7 +32,7 @@ test.describe('modal: a11y', () => {
await page.setContent(`
<ion-modal role="alertdialog"></ion-modal>
`);
const modal = page.locator('ion-modal');
const modal = page.locator('ion-modal .modal-wrapper');
await expect(modal).toHaveAttribute('role', 'alertdialog');
});