Skip to content

Commit

Permalink
feat: add accessibility story to toggle-button
Browse files Browse the repository at this point in the history
  • Loading branch information
@nowseemee
Christian Pajung authored and nowseemee committed Aug 2, 2021
1 parent a41d150 commit aaeabc6
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 28 deletions.
30 changes: 17 additions & 13 deletions packages/components/src/components/toggle-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,23 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ------------------------------------------------------------ | ----------------------------------------- | ----------- |
| `ariaLabel` | `aria-label` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` |
| `colorScheme` | `color-scheme` | (optional) background color scheme of a selected button | `"dark" \| "light"` | `'light'` |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `iconOnly` | `icon-only` | (optional) Button type | `boolean` | `false` |
| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` |
| `radius` | `radius` | (optional) set the border-radius left, right or both | `"both" \| "left" \| "right"` | `null` |
| `selected` | `selected` | (optional) If `true`, the button is selected | `boolean` | `false` |
| `size` | `size` | (optional) The size of the button | `"large" \| "regular" \| "small" \| "xs"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `toggleButtonId` | `toggle-button-id` | (optional) toggle button's id | `string` | `undefined` |
| `variant` | `variant` | (optional) Button variant | `"primary" \| "secondary"` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ------------------------------------------- |
| `ariaDescriptionTranslation` | `aria-description-translation` | a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties. | `string` | `'button at position $position; $selected'` |
| `ariaLabel` | `aria-label` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` |
| `ariaLangDeselected` | `aria-lang-deselected` | (optional) translation of 'deselected | `string` | `'deselected'` |
| `ariaLangSelected` | `aria-lang-selected` | (optional) translation of 'selected | `string` | `'selected'` |
| `colorScheme` | `color-scheme` | (optional) background color scheme of a selected button | `"dark" \| "light"` | `'light'` |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `iconOnly` | `icon-only` | (optional) Button type | `boolean` | `false` |
| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` |
| `position` | `position` | (optional) position within group | `number` | `undefined` |
| `radius` | `radius` | (optional) set the border-radius left, right or both | `"both" \| "left" \| "right"` | `null` |
| `selected` | `selected` | (optional) If `true`, the button is selected | `boolean` | `false` |
| `size` | `size` | (optional) The size of the button | `"large" \| "regular" \| "small" \| "xs"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `toggleButtonId` | `toggle-button-id` | (optional) toggle button's id | `string` | `undefined` |
| `variant` | `variant` | (optional) Button variant | `"primary" \| "secondary"` | `'primary'` |


## Events
Expand Down
20 changes: 10 additions & 10 deletions packages/components/src/components/toggle-group/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ------------------------------------------------------------ | ----------------------------------------- | ----------- |
| `ariaLabel` | `aria-label` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` |
| `border` | `border` | (optional) If `true`, the group has a border | `boolean` | `false` |
| `boxType` | `box-type` | (optional) inline or block element | `"block" \| "inline"` | `'inline'` |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `multi` | `multi` | (optional) more than one button selected possible | `boolean` | `true` |
| `size` | `size` | (optional) The size of the button | `"large" \| "regular" \| "small" \| "xs"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `variant` | `variant` | (optional) Button Group variant | `"primary" \| "secondary"` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| ---------------------- | ------------------------ | ------------------------------------------------------------ | ----------------------------------------- | ---------------------------------------------------- |
| `ariaLabelTranslation` | `aria-label-translation` | (optional) aria-label attribute needed for icon-only buttons | `string` | ``toggle button group with $slottedButtons buttons`` |
| `border` | `border` | (optional) If `true`, the group has a border | `boolean` | `false` |
| `boxType` | `box-type` | (optional) inline or block element | `"block" \| "inline"` | `'inline'` |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `multi` | `multi` | (optional) more than one button selected possible | `boolean` | `true` |
| `size` | `size` | (optional) The size of the button | `"large" \| "regular" \| "small" \| "xs"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `variant` | `variant` | (optional) Button Group variant | `"primary" \| "secondary"` | `'primary'` |


## Events
Expand Down
5 changes: 5 additions & 0 deletions packages/storybook-vue/stories/3_components/toggle-button/ScaleToggleButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
:icon-only="iconOnly"
:radius="radius"
:aria-label="ariaLabel"
:aria-description-translation="ariaDescriptionTranslation"
:aria-lang-selected="ariaLangSelected"
:aria-lang-deselected="ariaLangDeselected"
:styles="styles"
>
<slot></slot>
Expand All @@ -25,6 +28,8 @@ export default {
iconOnly: { type: Boolean, default: false },
radius: { type: String },
ariaLabel: { type: String },
ariaLangSelected: { type: String, default: 'selected' },
ariaLangDeselected: { type: String, default: 'deselected' },
styles: { type: String },
},
};
Expand Down
50 changes: 45 additions & 5 deletions packages/storybook-vue/stories/3_components/toggle-button/ToggleButton.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,18 @@ import ScaleToggleButton from './ScaleToggleButton.vue';
radius: {
control: { type: 'select', options: ['left', 'right', 'both'] },
},
colorScheme: {
colorScheme: {
control: { type: 'select', options: ['light', 'dark'] },
},
ariaDescriptionTranslation: {
control: { type: "text", },
},
ariaLangDeselected: {
control: { type: "text", },
},
ariaLangSelected: {
control: { type: "text", },
},
}}
/>

Expand All @@ -37,6 +46,9 @@ 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"
>
<scale-icon-action-search v-if="icon === 'before'" />
Expand All @@ -51,11 +63,13 @@ export const Template = (args, { argTypes }) => ({
style={{
display: 'inline-flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-between',
width: '100%',
}}
>
<h1>Toggle Button</h1>
<h2>A Toggle Button is meant to be used inside a Toggle Group</h2>
</div>

## Standard
Expand Down Expand Up @@ -199,7 +213,7 @@ export const Template = (args, { argTypes }) => ({
name="Color Scheme Dark"
args={{
label: 'Label',
colorScheme: 'dark'
colorScheme: 'dark'
}}
>
{Template.bind({})}
Expand Down Expand Up @@ -259,7 +273,7 @@ export const Template = (args, { argTypes }) => ({
name="XS"
args={{
label: 'Label',
size: 'xs'
size: 'xs'
}}
>
{Template.bind({})}
Expand All @@ -277,7 +291,7 @@ export const Template = (args, { argTypes }) => ({
name="Radius Left"
args={{
label: 'Label',
radius: 'left'
radius: 'left'
}}
>
{Template.bind({})}
Expand All @@ -295,7 +309,7 @@ export const Template = (args, { argTypes }) => ({
name="Radius Both"
args={{
label: 'Label',
radius: 'both'
radius: 'both'
}}
>
{Template.bind({})}
Expand All @@ -305,3 +319,29 @@ export const Template = (args, { argTypes }) => ({
```html
<scale-toggle-button radius="both">Label</scale-toggle-button>
```

## Accessibility, German

<Canvas withSource="none">
<Story
name="Accessibility"
args={{
label: 'Label',
ariaLabel: 'Drück mich',
ariaDescriptionTranslation: 'Bedienfläche $selected',
ariaLangSelected: 'selektiert',
ariaLangDeselected: 'deselektiert',
}}
>
{Template.bind({})}
</Story>
</Canvas>

```html
<scale-toggle-button
aria-label="Drück mich"
aria-description-translation="Bedienfläche $selected"
aria-lang-selected="selektiert"
aria-lang-deselected="deselektiert">Label
</scale-toggle-button>
```

0 comments on commit aaeabc6

Please sign in to comment.