@@ -129,3 +129,68 @@ describe('setRootAriaHidden()', () => {
129129expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
130130});
131131});
132+133+describe('aria-hidden on individual overlays', () => {
134+it('should hide non-topmost overlays from screen readers', async () => {
135+const page = await newSpecPage({
136+components: [Modal],
137+html: `
138+ <ion-modal id="one"></ion-modal>
139+ <ion-modal id="two"></ion-modal>
140+ `,
141+});
142+143+const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
144+const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
145+146+await modalOne.present();
147+await modalTwo.present();
148+149+expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
150+expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
151+});
152+153+it('should unhide new topmost overlay from screen readers when topmost is dismissed', async () => {
154+const page = await newSpecPage({
155+components: [Modal],
156+html: `
157+ <ion-modal id="one"></ion-modal>
158+ <ion-modal id="two"></ion-modal>
159+ `,
160+});
161+162+const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
163+const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
164+165+await modalOne.present();
166+await modalTwo.present();
167+168+// dismiss modalTwo so that modalOne becomes the new topmost overlay
169+await modalTwo.dismiss();
170+171+expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
172+});
173+174+it('should not keep overlays hidden from screen readers if presented after being dismissed while non-topmost', async () => {
175+const page = await newSpecPage({
176+components: [Modal],
177+html: `
178+ <ion-modal id="one"></ion-modal>
179+ <ion-modal id="two"></ion-modal>
180+ `,
181+});
182+183+const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
184+const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
185+186+await modalOne.present();
187+await modalTwo.present();
188+189+// modalOne is not the topmost overlay at this point and is hidden from screen readers
190+await modalOne.dismiss();
191+192+// modalOne will become the topmost overlay; ensure it isn't still hidden from screen readers
193+await modalOne.present();
194+expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
195+});
196+});