fix(dialog): dialog wrapper headline a11y

adobe · Nov 21, 2022 · 205e8f7 · 205e8f7
1 parent b46f724
commit 205e8f7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts
@@ -69,6 +69,9 @@ export class DialogWrapper extends DialogBase {
     @property()
     public headline = '';
 
+    @property({ type: String, attribute: 'headline-visibility' })
+    public headlineVisibility: 'none' | undefined;
+
     protected override get dialog(): Dialog {
         return this.shadowRoot.querySelector('sp-dialog') as Dialog;
     }
@@ -98,10 +101,14 @@ export class DialogWrapper extends DialogBase {
     }
 
     protected override renderDialog(): TemplateResult {
+        const hideDivider =
+            this.noDivider ||
+            !this.headline ||
+            this.headlineVisibility === 'none';
         return html`
             <sp-dialog
                 ?dismissable=${this.dismissable}
-                ?no-divider=${this.noDivider || !this.headline}
+                ?no-divider=${hideDivider}
                 ?error=${this.error}
                 mode=${ifDefined(this.mode)}
                 size=${ifDefined(this.size)}
@@ -122,7 +129,12 @@ export class DialogWrapper extends DialogBase {
                     : html``}
                 ${this.headline
                     ? html`
-                          <h2 slot="heading">${this.headline}</h2>
+                          <h2
+                              slot="heading"
+                              ?hidden=${this.headlineVisibility === 'none'}
+                          >
+                              ${this.headline}
+                          </h2>
                       `
                     : html``}
                 <slot></slot>

diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts
@@ -506,13 +506,18 @@ export const wrapperWithHeadlineNoDivider = (
     `;
 };
 
-export const wrapperNoHeadline = (
+export const wrapperHeadlineVisibilityNone = (
     args: StoryArgs = {},
     context: { viewMode?: string } = {}
 ): TemplateResult => {
     const open = context.viewMode === 'docs' ? false : true;
     return html`
-        <sp-dialog-wrapper ?open=${open} @close=${handleClose(args)}>
+        <sp-dialog-wrapper
+            headline="Accessible headline"
+            .headlineVisibility=${'none'}
+            ?open=${open}
+            @close=${handleClose(args)}
+        >
             Content of the dialog
         </sp-dialog-wrapper>
     `;

diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
@@ -33,8 +33,8 @@ import {
     wrapperDismissable,
     wrapperDismissableUnderlayError,
     wrapperFullscreen,
+    wrapperHeadlineVisibilityNone,
     wrapperLabeledHero,
-    wrapperNoHeadline,
     wrapperWithHeadline,
     wrapperWithHeadlineNoDivider,
 } from '../stories/dialog-wrapper.stories.js';
@@ -150,6 +150,8 @@ describe('Dialog Wrapper', () => {
         );
         await elementUpdated(wrapper);
 
+        await expect(wrapper).to.be.accessible();
+
         const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
         const divider = dialog.shadowRoot.querySelector(
             'sp-divider.divider'
@@ -158,9 +160,13 @@ describe('Dialog Wrapper', () => {
         expect(divider).to.be.null;
     });
     it("hides header divider when there's no header", async () => {
-        const wrapper = await styledFixture<DialogWrapper>(wrapperNoHeadline());
+        const wrapper = await styledFixture<DialogWrapper>(
+            wrapperHeadlineVisibilityNone()
+        );
         await elementUpdated(wrapper);
 
+        await expect(wrapper).to.be.accessible();
+
         const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
         const divider = dialog.shadowRoot.querySelector(
             'sp-divider.divider'