@innovaccer/design-system 2.5.0-4 → 2.6.0

package/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap

@@ -133,7 +133,9 @@ exports[`Chip component
       <i
         class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>
@@ -167,7 +169,9 @@ exports[`Chip component
       <i
         class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>
@@ -201,7 +205,9 @@ exports[`Chip component
       <i
         class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>
@@ -235,7 +241,9 @@ exports[`Chip component
       <i
         class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
         data-test="DesignSystem-GenericChip--clearButton"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         clear_round
       </i>

package/core/components/atoms/_chip/index.tsx

@@ -38,6 +38,8 @@ export const GenericChip = (props: GenericChipProps) => {
   };
 
   return (
+    // TODO(a11y)
+    // eslint-disable-next-line
     <div
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
       {...baseProps}

package/core/components/atoms/button/__stories__/Alert.story.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const AlertButton = () => <Button appearance="alert">Delete</Button>;
+export const AlertButton = () => (
+  <Button appearance="alert" aria-label="Delete">
+    Delete
+  </Button>
+);
 
 export default {
   title: 'Components/Button/Alert Button',
@@ -11,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Delete button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Delete'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/Cancel.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const BasicButton = () => (
-  <Button appearance="basic" size="regular">
+  <Button appearance="basic" size="regular" aria-label="Cancel">
     Cancel
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Basic Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Cancel'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconButtonGroup.story.tsx

@@ -3,9 +3,9 @@ import Button from '@/components/atoms/button';
 
 export const iconButtonGroup = () => (
   <div className="d-inline-flex">
-    <Button size="tiny" icon="content_copy " className="mr-2" tooltip="Copy" />
-    <Button size="tiny" icon="content_paste" className="mr-2" tooltip="Paste" />
-    <Button size="tiny" icon="delete" tooltip="Delete" />
+    <Button size="tiny" icon="content_copy" aria-label="Copy" className="mr-4" tooltip="Copy" />
+    <Button size="tiny" icon="content_paste" aria-label="Paste" className="mr-4" tooltip="Paste" />
+    <Button size="tiny" icon="delete" aria-label="Delete" tooltip="Delete" />
   </div>
 );
 
@@ -17,6 +17,15 @@ export default {
       docPage: {
         title: 'Button',
         description: 'A pattern using tiny icon buttons in a group.',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Copy'\` on button with *copy* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Paste'\` on button with *paste* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Delete'\` on button with *delete* icon to describe the action of button.
+        `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconButtonSecondary.story.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const iconButton = () => <Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />;
+export const iconButton = () => (
+  <Button appearance="basic" icon="keyboard_arrow_right" aria-label="Next in rank" tooltip="Next in rank" />
+);
 
 export default {
   title: 'Components/Button/Icon Button',
@@ -11,6 +13,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Secondary button with icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Next in rank'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const iconLeftButton = () => (
-  <Button icon="get_app" iconAlign="left">
+  <Button icon="get_app" iconAlign="left" aria-label="Download">
     Download
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Secondary button with left aligned icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Download'\` on button to indicate its purpose. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconRightSecondary.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const iconRightButton = () => (
-  <Button icon="arrow_forward" iconAlign="right">
+  <Button icon="arrow_forward" iconAlign="right" aria-label="Next in rank">
     Next in rank
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Secondary button with right aligned icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Next in rank'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/IconTransparent.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const transparentIconButton = () => <Button appearance="transparent" icon="more_horiz" />;
+export const transparentIconButton = () => <Button appearance="transparent" icon="more_horiz" aria-label="Menu" />;
 
 export default {
   title: 'Components/Button/Transparent Icon Button',
@@ -11,6 +11,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Transparent button with icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Menu'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/LabelButtonGroup.story.tsx

@@ -3,13 +3,15 @@ import Button from '@/components/atoms/button';
 
 export const labelButtonGroup = () => (
   <div className="d-flex">
-    <Button size="tiny" className="mr-2">
+    <Button size="tiny" className="mr-4" aria-label="Copy">
       Copy
     </Button>
-    <Button size="tiny" className="mr-2">
+    <Button size="tiny" className="mr-4" aria-label="Paste">
       Paste
     </Button>
-    <Button size="tiny">Delete</Button>
+    <Button size="tiny" aria-label="Delete">
+      Delete
+    </Button>
   </div>
 );
 
@@ -21,6 +23,15 @@ export default {
       docPage: {
         title: 'Button',
         description: 'A pattern using buttons in a group.',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Copy'\` on button with *copy* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Paste'\` on button with *paste* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Delete'\` on button with *delete* icon to describe the action of button.
+        `,
       },
     },
   },

package/core/components/atoms/button/__stories__/LargeIconExpanded.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const ExpandedButton = () => (
-  <Button appearance="primary" size="large" expanded={true}>
+  <Button appearance="primary" size="large" expanded={true} aria-label="Login">
     Login
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Large expanded button.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Login'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/LoadingPrimary.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const LoaderInButton = () => <Button appearance="primary" loading={true} />;
+export const LoaderInButton = () => <Button appearance="primary" loading={true} aria-label="loading" />;
 
 export default {
   title: 'Components/Button/Loader In Button',
@@ -11,6 +11,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Primary button in loading state.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='loading'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/Primary.story.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const PrimaryButton = () => (
-  <Button appearance="primary" size="regular">
-    Submit
+  <Button appearance="primary" size="regular" aria-label="Submit your response">
+    Submit your response
   </Button>
 );
 
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Primary button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Submit your response'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/SplitButton.story.tsx

@@ -15,7 +15,9 @@ const options = [
 
 export const splitButton = () => (
   <div className="d-flex">
-    <Button className="mr-2">Request review</Button>
+    <Button className="mr-2" aria-label="Request review">
+      Request review
+    </Button>
     <div className="mb-10" style={{ width: '150px' }}>
       <Dropdown menu={true} icon="expand_more" options={options} />
     </div>
@@ -30,6 +32,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Split button.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Request review'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/Transparent.story.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const transparentButton = () => <Button appearance="transparent">Re-evaluate</Button>;
+export const transparentButton = () => (
+  <Button appearance="transparent" aria-label="Re-evaluate">
+    Re-evaluate
+  </Button>
+);
 
 export default {
   title: 'Components/Button/Transparent Button',
@@ -11,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Transparent button.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Re-evaluate'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/index.story.tsx

@@ -21,7 +21,7 @@ export const all = () => {
 
   const iconAlign = select('iconAlign', ['left', 'right'], undefined);
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Open');
 
   return (
     <Button
@@ -36,6 +36,7 @@ export const all = () => {
       loading={loading}
       icon={icon}
       iconAlign={iconAlign}
+      aria-label="Open"
     >
       {children}
     </Button>
@@ -45,4 +46,13 @@ export const all = () => {
 export default {
   title: 'Components/Button/All',
   component: Button,
+  parameters: {
+    docs: {
+      docPage: {
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Open'\` to describe the action of button 
+         `,
+      },
+    },
+  },
 };

package/core/components/atoms/button/__stories__/variants/Appearance.story.tsx

@@ -28,6 +28,7 @@ export const appearance = () => {
               expanded={expanded}
               disabled={disabled}
               loading={loading}
+              aria-label={`${appear}`}
             >
               {children}
             </Button>
@@ -47,6 +48,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** name accordingly which describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/Expanded.story.tsx

@@ -28,6 +28,7 @@ export const expanded = () => {
               expanded={ButtonExpanded}
               disabled={disabled}
               loading={loading}
+              aria-label={`${appear}`}
             >
               {children}
             </Button>
@@ -47,6 +48,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** name accordingly which describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/Size.story.tsx

@@ -29,6 +29,7 @@ export const size = () => {
                 expanded={expanded}
                 disabled={disabled}
                 loading={loading}
+                aria-label={`${ButtonSize}`}
               >
                 {children}
               </Button>
@@ -49,6 +50,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** name accordingly which describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/icon/Icon.story.tsx

@@ -19,6 +19,7 @@ export const icon = () => {
             icon="add"
             size="tiny"
             largeIcon={false}
+            aria-label="Add document"
           />
           <Button
             onClick={action('button-clicked')}
@@ -28,6 +29,7 @@ export const icon = () => {
             icon="add"
             size="tiny"
             largeIcon={true}
+            aria-label="Add document"
           />
         </div>
       </div>
@@ -44,6 +46,7 @@ export const icon = () => {
             icon="print"
             size="regular"
             largeIcon={false}
+            aria-label="Print"
           />
           <Button
             onClick={action('button-clicked')}
@@ -53,6 +56,7 @@ export const icon = () => {
             icon="print"
             size="regular"
             largeIcon={true}
+            aria-label="Print"
           />
         </div>
       </div>
@@ -69,6 +73,7 @@ export const icon = () => {
             icon="more_horiz"
             size="large"
             largeIcon={false}
+            aria-label="Menu"
           />
           <Button
             onClick={action('button-clicked')}
@@ -78,6 +83,7 @@ export const icon = () => {
             icon="more_horiz"
             size="large"
             largeIcon={true}
+            aria-label="Menu"
           />
         </div>
       </div>
@@ -92,6 +98,15 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** 
+        <br/> 
+        - Add \`aria-label='Add document'\` on button with *add* icon to indicate its purpose.
+        <br/> 
+        - Add \`aria-label='Print'\` on button with *print* icon to indicate its purpose.
+        <br/> 
+        - Add \`aria-label='Menu'\` on button with *menu* icon to indicate its purpose.
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/icon/IconLeft.story.tsx

@@ -32,6 +32,7 @@ export const iconLeft = () => {
                 loading={loading}
                 icon={icon}
                 iconAlign={iconAlign}
+                aria-label="Refresh"
               >
                 {children}
               </Button>
@@ -52,6 +53,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Refresh'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/icon/IconRight.story.tsx

@@ -32,6 +32,7 @@ export const iconRight = () => {
                 loading={loading}
                 icon={icon}
                 iconAlign={iconAlign}
+                aria-label="Refresh"
               >
                 {children}
               </Button>
@@ -52,6 +53,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Refresh'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/state/Alert.story.tsx

@@ -10,7 +10,7 @@ export const alert = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Delete');
 
   const style = {
     justifyContent: 'space-between',
@@ -28,6 +28,7 @@ export const alert = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Delete"
         >
           {children}
         </Button>
@@ -44,6 +45,7 @@ export const alert = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Delete"
         >
           {children}
         </Button>
@@ -60,28 +62,13 @@ export const alert = () => {
           expanded={expanded}
           disabled={disabled}
           loading={true}
+          aria-label="Loading"
         >
           {''}
         </Button>
         <br />
         <Text weight="strong">Loading</Text>
       </div>
-      <div className="mr-9">
-        <Button
-          onClick={action('button-clicked')}
-          onMouseEnter={action('mouse-enter')}
-          onMouseLeave={action('mouse-leave')}
-          appearance={'alert'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
     </div>
   );
 };
@@ -93,6 +80,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Delete'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/state/Basic.story.tsx

@@ -10,7 +10,7 @@ export const basic = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Open');
 
   const style = {
     justifyContent: 'space-between',
@@ -28,6 +28,7 @@ export const basic = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -44,6 +45,7 @@ export const basic = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -60,28 +62,13 @@ export const basic = () => {
           expanded={expanded}
           disabled={disabled}
           loading={true}
+          aria-label="Loading"
         >
           {''}
         </Button>
         <br />
         <Text weight="strong">Loading</Text>
       </div>
-      <div className="mr-9">
-        <Button
-          onClick={action('button-clicked')}
-          onMouseEnter={action('mouse-enter')}
-          onMouseLeave={action('mouse-leave')}
-          appearance={'basic'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
       <div className="mr-9">
         <Button
           onClick={action('button-clicked')}
@@ -90,6 +77,7 @@ export const basic = () => {
           appearance={'basic'}
           size={'regular'}
           selected={true}
+          aria-label="Selected"
         >
           {children}
         </Button>
@@ -105,6 +93,7 @@ export const basic = () => {
           size={'regular'}
           selected={true}
           icon="events"
+          aria-label="Selected"
         />
         <br />
         <Text weight="strong">Selected Icon</Text>
@@ -120,6 +109,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Open'\` to describe the action of button 
+         `,
       },
     },
   },