feat: accessibility story toggle group

telekom · Aug 2, 2021 · cda7855 · cda7855
1 parent b75b6d4
commit cda7855
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 10 deletions.
diff --git a/packages/storybook-vue/stories/3_components/toggle-button/ScaleToggleButton.vue b/packages/storybook-vue/stories/3_components/toggle-button/ScaleToggleButton.vue
@@ -8,7 +8,6 @@
     :icon-only="iconOnly"
     :radius="radius"
     :aria-label="ariaLabel"
-    :aria-description-translation="ariaDescriptionTranslation"
     :aria-lang-selected="ariaLangSelected"
     :aria-lang-deselected="ariaLangDeselected"
     :styles="styles"

diff --git a/packages/storybook-vue/stories/3_components/toggle-button/ToggleButton.stories.mdx b/packages/storybook-vue/stories/3_components/toggle-button/ToggleButton.stories.mdx
@@ -17,9 +17,6 @@ import ScaleToggleButton from './ScaleToggleButton.vue';
 	  colorScheme: {
       control: { type: 'select', options: ['light', 'dark'] },
     },
-    ariaDescriptionTranslation: {
-      control: { type: "text", },
-    },
     ariaLangDeselected: {
       control: { type: "text", },
     },
@@ -46,7 +43,6 @@ export const Template = (args, { argTypes }) => ({
     :icon-only="iconOnly"
     :radius="radius"
     :aria-label="ariaLabel"
-    :aria-description-translation="ariaDescriptionTranslation"
     :aria-lang-selected="ariaLangSelected"
     :aria-lang-deselected="ariaLangDeselected"
     :styles="styles"

diff --git a/packages/storybook-vue/stories/3_components/toggle-group/ScaleToggleGroup.vue b/packages/storybook-vue/stories/3_components/toggle-group/ScaleToggleGroup.vue
@@ -2,11 +2,11 @@
   <scale-toggle-group
     :size="size"
     :variant="variant"
-	:box-type="boxType"
+	  :box-type="boxType"
     :disabled="disabled"
     :border="border"
     :multi="multi"
-    :aria-label="ariaLabel"
+    :aria-label-translation="ariaLabelTranslation"
     :styles="styles"
   >
     <slot></slot>
@@ -23,6 +23,7 @@ export default {
     border: { type: Boolean, default: false },
     multi: { type: Boolean, default: true },
     ariaLabel: { type: String },
+    ariaLabelTranslation: { type: String, default: 'toggle button group with $slottedButtons buttons' },
     styles: { type: String },
   },
 };

diff --git a/packages/storybook-vue/stories/3_components/toggle-group/ToggleGroup.stories.mdx b/packages/storybook-vue/stories/3_components/toggle-group/ToggleGroup.stories.mdx
@@ -11,9 +11,12 @@ import ScaleToggleGroup from './ScaleToggleGroup.vue';
     size: {
       control: { type: 'select', options: ['xs', 'small', 'regular', 'large'] },
     },
-	boxType: {
+	  boxType: {
       control: { type: 'select', options: ['inline', 'block'] },
     },
+    ariaLabelTranslation: {
+      control: { type: "text", },
+    },
   }}
 />
 
@@ -28,11 +31,11 @@ export const Template = (args, { argTypes }) => ({
   <scale-toggle-group
     :size="size"
     :variant="variant"
-	:box-type="boxType"
+	  :box-type="boxType"
     :disabled="disabled"
     :border="border"
     :multi="multi"
-    :aria-label="ariaLabel"
+    :aria-label-translation="ariaLabelTranslation"
     :styles="styles"
   >
     <scale-toggle-button>Label</scale-toggle-button>
@@ -267,4 +270,39 @@ export const Template = (args, { argTypes }) => ({
     <scale-toggle-button>Label</scale-toggle-button>
     <scale-toggle-button selected>Label</scale-toggle-button>
 </scale-toggle-group>
+```
+
+## Accessibility, German
+
+<Canvas withSource="none">
+  <Story
+    name="Accessibility, German"
+    args={{
+      ariaLabelTranslation: "wechsel schalter gruppe mit $slottedButtons schaltern"
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-toggle-group aria-label-translation="wechsel schalter gruppe mit $slottedButtons schaltern">
+  <scale-toggle-button 
+    aria-label="Drück mich"
+    aria-lang-selected="selektiert"
+    aria-lang-deselected="deselektiert">Label
+  </scale-toggle-button>
+  <scale-toggle-button 
+    aria-label="Drück mich"
+    aria-lang-selected="selektiert"
+    aria-lang-deselected="deselektiert">Label
+  </scale-toggle-button>
+  <scale-toggle-button 
+    aria-label="Drück mich"
+    aria-lang-selected="selektiert"
+    aria-lang-deselected="deselektiert"
+    selected
+    >Label
+  </scale-toggle-button>
+</scale-toggle-group>
 ```