fix(dialog-wrapper): add dismiss-label attribute for the close button…

…'s label (#4154) * fix: adding dismiss-label to dialog, dialogWrapper * fix(dialog): typo in story * chore: core review cleanup --------- Co-authored-by: Susmitha Yenugula <yenugula@adobe.com> Co-authored-by: Westbrook Johnson <westbrook.johnson@gmail.com>
adobe · Mar 20, 2024 · c450a09 · c450a09
1 parent 9b3bd55
commit c450a09
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 4 deletions.
diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md
@@ -1,6 +1,6 @@
 ## Description
 
-`sp-dialog-wrapper` supplies an attribute based interface for the managed custmization of an `sp-dialog` element and the light DOM supplied to it. This is paired it with an `underlay` attribute that opts-in to the use of an `sp-underlay` element between your page content and the `sp-dialog` that opens over it.
+`sp-dialog-wrapper` supplies an attribute based interface for the managed customization of an `sp-dialog` element and the light DOM supplied to it. This is paired it with an `underlay` attribute that opts-in to the use of an `sp-underlay` element between your page content and the `sp-dialog` that opens over it.
 
 ### Usage
 
@@ -34,6 +34,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
         slot="click-content"
         headline="Dialog title"
         dismissable
+        dismiss-label="Close"
         underlay
         footer="Content for footer"
     >

diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
@@ -61,6 +61,9 @@ export class Dialog extends ObserveSlotPresence(AlertDialog, [
     @property({ type: Boolean, reflect: true })
     public dismissable = false;
 
+    @property({ type: String, reflect: true, attribute: 'dismiss-label' })
+    public dismissLabel = 'Close';
+
     protected get hasFooter(): boolean {
         return this.getSlotContentPresence('[slot="footer"]');
     }
@@ -123,7 +126,7 @@ export class Dialog extends ObserveSlotPresence(AlertDialog, [
         return html`
             <sp-close-button
                 class="close-button"
-                label="Close"
+                label=${this.dismissLabel}
                 quiet
                 size="m"
                 @click=${this.close}

diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts
@@ -50,6 +50,9 @@ export class DialogWrapper extends DialogBase {
     @property({ attribute: 'confirm-label' })
     public confirmLabel = '';
 
+    @property({ attribute: 'dismiss-label' })
+    public dismissLabel = 'Close';
+
     @property()
     public footer = '';
 
@@ -124,6 +127,7 @@ export class DialogWrapper extends DialogBase {
         return html`
             <sp-dialog
                 ?dismissable=${this.dismissable}
+                dismiss-label=${this.dismissLabel}
                 ?no-divider=${hideDivider}
                 ?error=${this.error}
                 mode=${ifDefined(this.mode)}

diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts
@@ -27,7 +27,7 @@ import '../../overlay/stories/index.js';
 import type { DialogWrapper } from '@spectrum-web-components/dialog';
 
 export default {
-    title: 'Dialog Wrapped',
+    title: 'Dialog Wrapper',
     component: 'sp-dialog-wrapper',
     argTypes: {
         onClose: { action: 'close' },

diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
@@ -217,6 +217,7 @@ describe('Dialog Wrapper', () => {
         const dismissButton = dialogRoot.querySelector(
             '.close-button'
         ) as HTMLButtonElement;
+        expect(dismissButton.ariaLabel).to.be.equals('Close');
         dismissButton.click();
 
         await elementUpdated(el);

diff --git a/packages/dialog/test/dialog.test.ts b/packages/dialog/test/dialog.test.ts
@@ -135,6 +135,8 @@ describe('Dialog', () => {
                 : el.querySelector('.close-button ')
         ) as HTMLElement;
 
+        expect(closeButton.ariaLabel).to.be.equals('Close');
+
         closeButton.click();
 
         await elementUpdated(el);

diff --git a/yarn.lock b/yarn.lock
@@ -5367,7 +5367,7 @@
   integrity sha512-rGfd7jqXOdR69bEjrRP58ynuIeJU0czPfwQvzhtCzg7jKVukV+efNHqrs086sC6xutB3W4TF71K/dZMr3oyTyg==
 
 "@spectrum-web-components/eslint-plugin@file:./linters/eslint":
-  version "0.41.2"
+  version "0.42.0"
 
 "@storybook/addon-a11y@^7.5.0":
   version "7.6.17"