Fix accessibilkty issues on Buttons Canvas Demo

- Add Notifications `aria-label` to icon-only button - Adds false to `aria-disabled` (otherwise it is invalid)
trimble-oss · Jun 28, 2024 · 6759840 · 6759840
1 parent f921666
commit 6759840
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 44 deletions.
diff --git a/...ook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx b/...ook/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,
   <modus-button>Button 2</modus-button>
   <modus-button>Button 3</modus-button>
 </modus-button-group>
-
 ```
 
 <Anchor storyId="components-button-group--single-selection" />
@@ -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<ModusButtonGroupButtonClickEvent>` |
 | `selectionChange` | An event that fires when selection type is `single` or `multiple` on button click that provides the list of selected buttons. | `CustomEvent<HTMLModusButtonElement[]>`         |
 

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
@@ -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,21 +115,25 @@ const DefaultTemplate = ({
   rightIcon,
   iconOnly,
   showCaret,
-  label
+  label,
 }) => html`
   <modus-button
     aria-disabled=${ariaDisabled}
     aria-label=${ariaLabel}
     button-style=${buttonStyle}
     color=${color}
     ?disabled=${disabled}
-    size=${size} left-icon=${leftIcon} right-icon=${rightIcon} icon-only=${iconOnly} show-caret=${showCaret}>
+    size=${size}
+    left-icon=${leftIcon}
+    right-icon=${rightIcon}
+    icon-only=${iconOnly}
+    show-caret=${showCaret}>
     ${label}
   </modus-button>
 `;
 
 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/...workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx b/...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
 <modus-card height="270px" width="250px" show-card-border="true" show-shadow-on-hover="true">
-    <!-- Render anything here -->
-    <div style="padding:10px">
-      <h4>Card title</h4>
-      <h5>Card subtitle</h5>
-      <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-      <modus-button color="primary">Go somewhere</modus-button>
-    </div>
-  </modus-card>
+  <!-- Render anything here -->
+  <div style="padding:10px">
+    <h4>Card title</h4>
+    <h5>Card subtitle</h5>
+    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <modus-button color="primary">Go somewhere</modus-button>
+  </div>
+</modus-card>
 ```
 
 ### 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`     |
 
 ---