@innovaccer/design-system 2.5.0-4 → 2.6.0

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

@@ -3,6 +3,7 @@ import { select, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
 import Switch from '../index';
+import { Label } from '@/index';
 
 // CSF format story
 export const all = () => {
@@ -18,13 +19,35 @@ export const all = () => {
   };
 
   return (
-    <div>
-      <Switch disabled={disabled} checked={checked} size={size} onChange={onChangeHandler} />
-    </div>
+    <form>
+      <Label htmlFor="vaccination-status">Have you been vaccinated ?</Label>
+      <div>
+        <Switch id="vaccination-status" disabled={disabled} checked={checked} size={size} onChange={onChangeHandler} />
+      </div>
+    </form>
   );
 };
 
 export default {
   title: 'Components/Switch/All',
   component: Switch,
+  parameters: {
+    docs: {
+      docPage: {
+        a11yProps: ` 
+        **htmlFor:** 
+        <br/> 
+        -Add \`htmlFor='vaccination-status'\` to label to programmatically associated it with switch 
+        which has \`id='vaccination-status'\`. 
+        <br/> 
+        -This means that,a screen reader will read out the label when the user is focused on the switch, 
+        making it easier for an assistive technology user to understand 
+        what data should be entered.
+        <br/> 
+        -When a user clicks or touches/taps a label, the browser passes the focus to its associated switch. That increased hit 
+        area for focusing the input provides an advantage to anyone trying to activate it.
+         `,
+      },
+    },
+  },
 };

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

@@ -12,7 +12,7 @@ export const size = () => {
         return (
           <div key={ind} className="mr-9">
             <div className="h-50">
-              <Switch defaultChecked={true} size={SwitchSize} />
+              <Switch aria-label={`Switch ${SwitchSize}`} defaultChecked={true} size={SwitchSize} />
             </div>
             <br />
             <Text weight="strong">{SwitchSize.charAt(0).toUpperCase() + SwitchSize.slice(1)}</Text>
@@ -30,6 +30,15 @@ export default {
     docs: {
       docPage: {
         title: 'Switch',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Switch tiny'\` on switch with *Tiny* text to describe the action of switch.
+        <br/>
+        - Add \`aria-label='Switch regular'\` on switch with *regular* text to describe the action of switch.
+        <br/>
+        - Add \`aria-label='Switch large'\` on switch with *Large* text to describe the action of switch.
+        `,
       },
     },
   },

package/core/components/atoms/switchInput/__stories__/variants/State.story.tsx

@@ -7,12 +7,12 @@ export const state = () => {
   return (
     <div className="d-flex">
       <div className="mr-9">
-        <Switch defaultChecked={true} disabled={false} />
+        <Switch aria-label="Switch enabled" defaultChecked={true} disabled={false} />
         <br />
         <Text weight="strong">Enabled</Text>
       </div>
       <div>
-        <Switch disabled={true} defaultChecked={true} />
+        <Switch aria-label="Switch disabled" disabled={true} defaultChecked={true} />
         <br />
         <Text weight="strong">Disabled</Text>
       </div>
@@ -27,6 +27,13 @@ export default {
     docs: {
       docPage: {
         title: 'Switch',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Switch enabled'\` on switch with *Enabled* text to describe the action of switch.
+        <br/>
+        - Add \`aria-label='Switch disabled'\` on switch with *Disabled* text to describe the action of switch.
+        `,
       },
     },
   },

package/core/components/atoms/textarea/__stories__/TextareaWithCaption.story.tsx

@@ -6,15 +6,19 @@ export const textareaWithCaption = () => {
 
   return (
     <>
-      <Label withInput={true}>Confirmation Notes</Label>
+      <Label withInput={true} htmlFor="notes">
+        Confirmation Notes
+      </Label>
       <Textarea
-        name="Textarea"
+        name="notes"
         className="w-50"
         value={value}
         onChange={(e) => {
           setValue(e.target.value);
         }}
         placeholder="Enter your comments here"
+        aria-labelledby="Confirmation Notes"
+        id="notes"
       />
       <Caption withInput={true}>This note will be automatically pinned for export.</Caption>
     </>
@@ -26,13 +30,15 @@ const customCode = `() => {
 
   return (
     <>
-      <Label withInput={true}>Confirmation Notes</Label>
+      <Label withInput={true} htmlFor="notes">Confirmation Notes</Label>
       <Textarea
         name="Textarea"
         className="w-50"
         value={value}
         onChange={e => { setValue(e.target.value); }}
         placeholder="Enter your comments here"
+        aria-labelledby="Confirmation Notes"
+        id="notes"
       />
       <Caption withInput={true}>This note will be automatically pinned for export.</Caption>
     </>

package/core/components/atoms/textarea/__stories__/defaultTextarea.story.tsx

@@ -3,8 +3,16 @@ import { Textarea, Label } from '@/index';
 
 export const defaultTextarea = () => (
   <>
-    <Label withInput={true}>Comments</Label>
-    <Textarea name="Textarea" className="w-25" placeholder="Enter your comments here" />
+    <Label withInput={true} htmlFor="comments">
+      Comments
+    </Label>
+    <Textarea
+      name="comments"
+      id="comments"
+      aria-labelledby="Comments"
+      className="w-25"
+      placeholder="Enter your comments here"
+    />
   </>
 );
 

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

@@ -29,6 +29,7 @@ export const all = () => {
         error={error}
         resize={resize}
         rows={rows}
+        aria-labelledby="Textarea"
       />
     </div>
   );

package/core/components/atoms/textarea/__stories__/variants/Disable.story.tsx

@@ -24,6 +24,7 @@ export const Disable = () => {
                 placeholder="Placeholder"
                 disabled={value}
                 rows={3}
+                aria-labelledby="Textarea"
               />
             </div>
             <Text weight="strong">{value ? 'Disabled' : 'Enabled'}</Text>

package/core/components/atoms/toast/__tests__/__snapshots__/Toast.test.tsx.snap

@@ -28,7 +28,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--alert"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -61,7 +63,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -100,7 +104,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -139,7 +145,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--success"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -178,7 +186,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--default Toast-icon Toast-icon--right Toast-icon--warning"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -217,7 +227,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--alert"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -262,7 +274,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--alert"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -315,7 +329,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -354,7 +370,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -413,7 +431,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -458,7 +478,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -517,7 +539,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--success"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -562,7 +586,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--success"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -621,7 +647,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--default Toast-icon Toast-icon--right Toast-icon--warning"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -666,7 +694,9 @@ exports[`Toast component
           </h5>
           <i
             class="material-icons material-icons-round Icon Icon--default Toast-icon Toast-icon--right Toast-icon--warning"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>

package/core/components/css-utilities/Align/Align.story.tsx

@@ -86,7 +86,7 @@ export const align = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Align',
+  title: 'Others/Styles/Align',
   component: align,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Background/Background.story.tsx

@@ -111,7 +111,7 @@ export const background = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Background',
+  title: 'Others/Styles/Background',
   component: background,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Border/Border.story.tsx

@@ -116,7 +116,7 @@ export const border = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Border',
+  title: 'Others/Styles/Border',
   component: border,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Display/Display.story.tsx

@@ -103,7 +103,7 @@ export const display = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Display',
+  title: 'Others/Styles/Display',
   component: display,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Flex/Flex.story.tsx

@@ -294,7 +294,7 @@ export const flex = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Flex',
+  title: 'Others/Styles/Flex',
   component: flex,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Miscellaneous/Miscellaneous.story.tsx

@@ -43,7 +43,7 @@ export const miscellaneous = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Miscellaneous',
+  title: 'Others/Styles/Miscellaneous',
   component: miscellaneous,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Overflow/Overflow.story.tsx

@@ -74,7 +74,7 @@ export const overflow = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Overflow',
+  title: 'Others/Styles/Overflow',
   component: overflow,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Position/Position.story.tsx

@@ -66,7 +66,7 @@ export const position = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Position',
+  title: 'Others/Styles/Position',
   component: position,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Sizing/Sizing.story.tsx

@@ -150,7 +150,7 @@ export const sizing = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Sizing',
+  title: 'Others/Styles/Sizing',
   component: sizing,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Spacing/Spacing.story.tsx

@@ -105,7 +105,7 @@ export const spacing = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Spacing',
+  title: 'Others/Styles/Spacing',
   component: spacing,
   parameters: {
     viewMode: 'story',

package/core/components/molecules/chatMessage/Box.tsx

@@ -33,11 +33,14 @@ export const Box = (props: InternalBoxProps) => {
     className
   );
 
+  /* TODO(a11y): fix accessibility  */
+  /* eslint-disable  */
   return (
     <div {...baseProps} className={MessageClass} onClick={onClick} data-test="DesignSystem-ChatMessage--Box">
       {children}
     </div>
   );
+  /* eslint-enable  */
 };
 
 Box.displayName = 'Box';

package/core/components/molecules/chipInput/ChipInput.tsx

@@ -190,6 +190,8 @@ export const ChipInput = (props: ChipInputProps) => {
   });
 
   return (
+    /* TODO(a11y): fix accessibility  */
+    /* eslint-disable  */
     <div data-test="DesignSystem-ChipInput" {...baseProps} className={ChipInputClass} onClick={onClickHandler}>
       <div className="ChipInput-wrapper">
         {chips && chips.length > 0 && chipComponents}
@@ -206,6 +208,7 @@ export const ChipInput = (props: ChipInputProps) => {
           onChange={onInputChangeHandler}
           onKeyDown={onKeyDownHandler}
         />
+        {/* eslint-enable */}
       </div>
       {chips.length > 0 && (
         <Icon

package/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap

@@ -25,7 +25,9 @@ exports[`ChipInput 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>
@@ -43,7 +45,9 @@ exports[`ChipInput 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>
@@ -58,7 +62,9 @@ exports[`ChipInput component
       <i
         class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
         data-test="DesignSystem-ChipInput--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         close_round
       </i>
@@ -92,7 +98,9 @@ exports[`ChipInput 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>
@@ -110,7 +118,9 @@ exports[`ChipInput 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>
@@ -126,7 +136,9 @@ exports[`ChipInput component
       <i
         class="material-icons material-icons-round Icon Icon--subtle ChipInput-icon"
         data-test="DesignSystem-ChipInput--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
+        tabindex="0"
       >
         close_round
       </i>

package/core/components/molecules/dropzone/Dropzone.tsx

@@ -70,6 +70,8 @@ export const Dropzone = (props: DropzoneProps) => {
             <Text size="large" weight="strong" className="mr-2" appearance={disabled ? 'disabled' : 'default'}>
               Drag your files here or
             </Text>
+            {/* TODO(a11y): fix accessibility  */}
+            {/* eslint-disable */}
             <span className="cursor-pointer" onClick={open}>
               <Text size="large" weight="strong" appearance={disabled ? 'disabled' : 'link'}>
                 browse files
@@ -77,6 +79,7 @@ export const Dropzone = (props: DropzoneProps) => {
             </span>
             <input {...getInputProps()} />
           </span>
+          {/* eslint-enable */}
           {formatLabel && <Text appearance={disabled ? 'disabled' : 'subtle'}>{formatLabel}</Text>}
           {sizeLabel && <Text appearance={disabled ? 'disabled' : 'subtle'}>{sizeLabel}</Text>}
           {sampleFileLink && <div className="mt-5">{sampleFileLink}</div>}

package/core/components/molecules/dropzone/FileSelectorUtils.tsx

@@ -16,7 +16,7 @@ export const COMMON_MIME_TYPES = new Map([
 
 const FILES_TO_IGNORE = ['.DS_Store', 'Thumbs.db'];
 
-interface FileArray extends Array<FileValue> {}
+type FileArray = Array<FileValue>;
 
 type FileValue = FileWithPath | FileArray[];
 

package/core/components/molecules/editableChipInput/EditableChipInput.tsx

@@ -87,13 +87,17 @@ export const EditableChipInput = (props: EditableChipInputProps) => {
 
   const onChangeHandler = (eventType: string) => {
     switch (eventType) {
-      case 'edit':
+      case 'edit': {
         setShowComponent(true);
-      case 'hover':
-        return;
-      case 'default':
+        break;
+      }
+      case 'hover': {
+        break;
+      }
+      case 'default': {
         setShowComponent(false);
-        return;
+        break;
+      }
     }
   };
 

package/core/components/molecules/editableChipInput/__stories__/Uncontrolled.story.tsx

@@ -26,7 +26,7 @@ export const uncontrolled = () => {
 };
 
 const customCode = `() => {
-  const onClick = (item) => console.log(\`\onClick: \${item}\`);
+  const onClick = (item) => console.log(\`onClick: \${item}\`);
   const chipOptions = { onClick, clearButton: true };
   const chipInputOptions = {
     chipOptions,

package/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap

@@ -32,7 +32,9 @@ exports[`EditableChipInput 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>
@@ -50,7 +52,9 @@ exports[`EditableChipInput 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>
@@ -94,7 +98,9 @@ exports[`EditableChipInput 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>
@@ -112,7 +118,9 @@ exports[`EditableChipInput 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>

package/core/components/molecules/editableDropdown/EditableDropdown.tsx

@@ -57,12 +57,12 @@ export const EditableDropdown = (props: EditableDropdownProps) => {
     switch (eventType) {
       case 'edit':
         setEditing(true);
+        break;
       case 'hover':
         setShowComponent(true);
-        return;
+        break;
       case 'default':
         setShowComponent(false);
-        return;
     }
   };