From 67598406e164546b65032e2fe086deee4edb6543 Mon Sep 17 00:00:00 2001 From: coliff Date: Fri, 28 Jun 2024 16:32:57 +0900 Subject: [PATCH] Fix accessibilkty issues on Buttons Canvas Demo - Add Notifications `aria-label` to icon-only button - Adds false to `aria-disabled` (otherwise it is invalid) --- .../modus-button-group-storybook-docs.mdx | 6 +- .../modus-button/modus-button.stories.tsx | 57 +++++++++---------- .../modus-card/modus-card-storybook-docs.mdx | 21 ++++--- 3 files changed, 40 insertions(+), 44 deletions(-) diff --git a/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx index 26a55a09e..a5d9bfb02 100644 --- a/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx @@ -6,6 +6,7 @@ import { Anchor } from '@storybook/addon-docs'; This component utilizes the `modus-button` element, allowing you to render your own HTML in the button group. #### Implementation Details + For Text Buttons and Icon with Text Buttons, - Solid buttons supports all the given colors. @@ -34,7 +35,6 @@ For Icon only Buttons, Button 2 Button 3 - ``` @@ -87,7 +87,7 @@ interface ModusButtonGroupButtonClickEvent { ### Properties | Property | Attribute | Description | Type | Default | -|-----------------|------------------|------------------------------------------------------------------|--------------------------------------------------|-------------| +| --------------- | ---------------- | ---------------------------------------------------------------- | ------------------------------------------------ | ----------- | | `ariaDisabled` | `aria-disabled` | (optional) The button groups's `aria-disabled` state | `string` | `undefined` | | `ariaLabel` | `aria-label` | (optional) The button groups's `aria-label` | `string` | `undefined` | | `buttonStyle` | `button-style` | (optional) The style of the buttons in group | `"borderless" , "fill" , "outline"` | `'outline'` | @@ -99,7 +99,7 @@ interface ModusButtonGroupButtonClickEvent { ### DOM Events | Event | Description | Type | -|-------------------|-------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------| +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | | `buttonClick` | An event that fires on button click. | `CustomEvent` | | `selectionChange` | An event that fires when selection type is `single` or `multiple` on button click that provides the list of selected buttons. | `CustomEvent` | diff --git a/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx b/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx index 9585a9e34..cffcc7d71 100644 --- a/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx @@ -16,6 +16,7 @@ export default { name: 'aria-label', description: "The button's aria-label", table: { + defaultValue: { summary: false }, type: { summary: 'string' }, }, }, @@ -69,21 +70,21 @@ export default { }, iconOnly: { name: 'icon-only', - description: "Takes the icon name and renders an icon-only button", + description: 'Takes the icon name and renders an icon-only button', table: { type: { summary: 'string' }, }, }, leftIcon: { name: 'left-icon', - description: "Takes the icon name and shows the icon aligned to the left of the button text", + description: 'Takes the icon name and shows the icon aligned to the left of the button text', table: { type: { summary: 'string' }, }, }, rightIcon: { name: 'right-icon', - description: "Takes the icon name and shows the icon aligned to the right of the button text", + description: 'Takes the icon name and shows the icon aligned to the right of the button text', table: { type: { summary: 'string' }, }, @@ -114,7 +115,7 @@ const DefaultTemplate = ({ rightIcon, iconOnly, showCaret, - label + label, }) => html` + size=${size} + left-icon=${leftIcon} + right-icon=${rightIcon} + icon-only=${iconOnly} + show-caret=${showCaret}> ${label} `; const DefaultTemplateArgs = { - ariaDisabled: '', + ariaDisabled: 'false', ariaLabel: '', buttonStyle: 'fill', color: 'primary', @@ -138,41 +143,33 @@ const DefaultTemplateArgs = { rightIcon: '', iconOnly: '', showCaret: false, - label: 'Default' + label: 'Default', }; - export const Default = DefaultTemplate.bind({}); -Default.args = { ...DefaultTemplateArgs -}; +Default.args = { ...DefaultTemplateArgs }; export const Borderless = DefaultTemplate.bind({}); -Borderless.args = {...DefaultTemplateArgs, - buttonStyle: 'borderless', label: 'Borderless', -}; +Borderless.args = { ...DefaultTemplateArgs, buttonStyle: 'borderless', label: 'Borderless' }; export const Outline = DefaultTemplate.bind({}); -Outline.args = {...DefaultTemplateArgs, - buttonStyle: 'outline', label: 'Outline', -}; +Outline.args = { ...DefaultTemplateArgs, buttonStyle: 'outline', label: 'Outline' }; export const IconWithText = DefaultTemplate.bind({}); -IconWithText.args = {...DefaultTemplateArgs, label: 'Default', - leftIcon: 'notifications' -}; +IconWithText.args = { ...DefaultTemplateArgs, label: 'Default', leftIcon: 'notifications' }; export const IconOnly = DefaultTemplate.bind({}); -IconOnly.args = {...DefaultTemplateArgs, label: '', buttonStyle: 'borderless', -color: 'secondary', -size: 'large', -iconOnly: 'notifications', -showCaret: false +IconOnly.args = { + ...DefaultTemplateArgs, + ariaLabel: 'Notifications', + ariaDisabled: false, + label: '', + buttonStyle: 'borderless', + color: 'secondary', + size: 'large', + iconOnly: 'notifications', + showCaret: false, }; export const WithCaret = DefaultTemplate.bind({}); -WithCaret.args = {...DefaultTemplateArgs, label: 'Primary', -color: 'primary', -disabled: false, -showCaret: true -}; - +WithCaret.args = { ...DefaultTemplateArgs, label: 'Primary', color: 'primary', disabled: false, showCaret: true }; diff --git a/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx index a7230b58d..d1db727dd 100644 --- a/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx @@ -14,27 +14,26 @@ This component utilizes the slot element, allowing you to render your own HTML i ```html - -
-

Card title

-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Go somewhere -
- + +
+

Card title

+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+ ``` ### Properties - | Property | Attribute | Description | Type | Default | | ------------------- | ---------------------- | -------------------------------------------------------------------------------------- | --------- | ----------- | | `ariaLabel` | `aria-label` | (optional) The card's aria-label. | `string` | `undefined` | | `borderRadius` | `border-radius` | (optional) The border radius of the card. | `string` | `4px` | -| `height` | `height` | (optional) The height of the card. | `string` | `269px` | +| `height` | `height` | (optional) The height of the card. | `string` | `269px` | | `showCardBorder` | `show-card-border` | (optional) A flag that controls the display of border. | `boolean` | `true` | | `showShadowOnHover` | `show-shadow-on-hover` | (optional) A flag that controls the display of shadow box when the element is hovered. | `boolean` | `true` | -| `width` | `width` | (optional) The width of the card. | `string` | `240px` | +| `width` | `width` | (optional) The width of the card. | `string` | `240px` | ---