fix: add close aria label to modal (#815)

carbon-design-system · Feb 4, 2020 · 9b56b0f · 9b56b0f
1 parent b0bbf1b
commit 9b56b0f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/packages/core/src/components/cv-modal/cv-modal-notes.md b/packages/core/src/components/cv-modal/cv-modal-notes.md
@@ -35,6 +35,7 @@ This is done after the modal transitions into its visible state, which is trigge
 
 ## Attributes
 
+- closeAriaLabel: optional label for close button, default 'Close modal'
 - auto-hide-off: boolean value if true the component user is expected to close the modal via visible property or hide method.
 - kind: 'danger' other wise default modal.
 - visible: visibility of modal dialog

diff --git a/packages/core/src/components/cv-modal/cv-modal.vue b/packages/core/src/components/cv-modal/cv-modal.vue
@@ -28,7 +28,7 @@
             Modal Title
           </slot>
         </p>
-        <button class="bx--modal-close" type="button" @click="onClose" ref="close">
+        <button class="bx--modal-close" type="button" @click="onClose" ref="close" :aria-lael="closeAriaLabel">
           <Close16 class="bx--modal-close__icon" />
         </button>
       </div>
@@ -76,6 +76,7 @@ export default {
     Close16,
   },
   props: {
+    closeAriaLabel: { type: String, default: 'Close modal' },
     kind: {
       type: String,
       default: '',

diff --git a/storybook/stories/cv-modal-story.js b/storybook/stories/cv-modal-story.js
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue';
-import { boolean, select } from '@storybook/addon-knobs';
+import { boolean, select, text } from '@storybook/addon-knobs';
 
 import { action } from '@storybook/addon-actions';
 
@@ -14,6 +14,12 @@ const storiesDefault = storiesOf('Components/CvModal', module);
 // const storiesExperimental = storiesOf('Experimental/CvModal', module);
 
 const preKnobs = {
+  closeAriaLabel: {
+    group: 'attr',
+    type: text,
+    config: ['close-aria-label', 'Close'], // consts.CONFIG], // fails when used with number in storybook 4.1.4
+    prop: 'close-aria-label',
+  },
   label: {
     group: 'content',
     slot: 'label',
@@ -139,11 +145,15 @@ const preKnobs = {
 };
 
 const variants = [
-  { name: 'default', includes: ['label', 'title', 'content', 'size', 'visible', 'events', 'autoHideOff'] },
-  { name: 'no-body', includes: ['label', 'title', 'visible', 'size', 'events', 'autoHideOff'] },
+  {
+    name: 'default',
+    includes: ['closeAriaLabel', 'label', 'title', 'content', 'size', 'visible', 'events', 'autoHideOff'],
+  },
+  { name: 'no-body', includes: ['closeAriaLabel', 'label', 'title', 'visible', 'size', 'events', 'autoHideOff'] },
   {
     name: 'buttons',
     includes: [
+      'closeAriaLabel',
       'label',
       'title',
       'content',
@@ -158,6 +168,7 @@ const variants = [
   {
     name: 'buttons with listeners',
     includes: [
+      'closeAriaLabel',
       'label',
       'title',
       'content',
@@ -172,11 +183,21 @@ const variants = [
   },
   {
     name: 'primary-only',
-    includes: ['label', 'title', 'content', 'size', 'primaryButton', 'primaryButtonDisabled', 'events', 'autoHideOff'],
+    includes: [
+      'closeAriaLabel',
+      'label',
+      'title',
+      'content',
+      'size',
+      'primaryButton',
+      'primaryButtonDisabled',
+      'events',
+      'autoHideOff',
+    ],
   },
   {
     name: 'secondary-only',
-    includes: ['label', 'title', 'size', 'content', 'secondaryButton', 'events', 'autoHideOff'],
+    includes: ['closeAriaLabel', 'label', 'title', 'size', 'content', 'secondaryButton', 'events', 'autoHideOff'],
   },
   { name: 'minimal', includes: ['label', 'title', 'content'] },
   { name: 'with input', excludes: ['label', 'title', 'content', 'scrollingContent'] },