@innovaccer/design-system 2.7.0-1 → 2.7.0

package/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`MetricInput component
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
         data-test="DesignSystem-MetricInput--icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -63,6 +64,7 @@ exports[`MetricInput component
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
         data-test="DesignSystem-MetricInput--icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round

package/core/components/atoms/multiSlider/Handle.tsx

@@ -116,6 +116,7 @@ export class Handle extends React.Component<InternalHandleProps, HandleState> {
     const { stepSize, value } = this.props;
     const { keyCode } = event;
 
+    // TODO(a11y): add ARROW_DOWN & ARROW_UP too
     if (keyCode === Keys.ARROW_LEFT) {
       this.changeValue(value - stepSize);
       event.preventDefault();

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

@@ -10,6 +10,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--alert"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round
@@ -51,6 +52,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--info"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         info_round
@@ -92,6 +94,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--success"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         check_circle_round
@@ -133,6 +136,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--warning"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round
@@ -174,6 +178,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--alert"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round
@@ -221,6 +226,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--alert"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round
@@ -282,6 +288,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--info"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         info_round
@@ -329,6 +336,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--info"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         info_round
@@ -390,6 +398,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--success"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         check_circle_round
@@ -437,6 +446,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--success"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         check_circle_round
@@ -498,6 +508,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--warning"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round
@@ -545,6 +556,7 @@ exports[`Toast component
     >
       <i
         class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--warning"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round

package/core/components/molecules/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -56,6 +56,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -178,6 +179,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -298,6 +300,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -419,6 +422,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -540,6 +544,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -661,6 +666,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -782,6 +788,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -903,6 +910,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -1024,6 +1032,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -1145,6 +1154,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -1266,6 +1276,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -1387,6 +1398,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round
@@ -1508,6 +1520,7 @@ exports[`Dialog component
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   close_round

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

@@ -6,6 +6,7 @@ import DropzoneActive from './DropzoneActive';
 import DropzoneError from './DropzoneError';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { fileErrorMessages } from './FileErrors';
+import { useAccessibilityProps } from '@/accessibility/utils';
 
 export type DropZoneType = 'standard' | 'compressed' | 'tight';
 
@@ -59,9 +60,13 @@ export const Dropzone = (props: DropzoneProps) => {
 
   const renderDropzone = () => {
     if (isDragReject) return <DropzoneError type={type} error={fileErrorMessages[fileError]} />;
-
     if (isDragActive) return <DropzoneActive type={type} />;
 
+    const buttonAccessibilityProps = useAccessibilityProps({
+      onClick: open,
+      'aria-label': 'Drag your files here or click to select files',
+    });
+
     return (
       <React.Fragment>
         {type !== 'tight' && <Icon name="backup" size={64} className={IconClass} />}
@@ -70,16 +75,18 @@ 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
-              </Text>
-            </span>
+            <Text
+              tabIndex={disabled ? -1 : 0}
+              className="ml-2 cursor-pointer"
+              size="large"
+              weight="strong"
+              appearance={disabled ? 'disabled' : 'link'}
+              {...buttonAccessibilityProps}
+            >
+              browse files
+            </Text>
             <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/__stories__/index.story.tsx

@@ -41,9 +41,17 @@ export const all = () => {
     return (
       <React.Fragment>
         {fileItem.networkError && (
-          <Button appearance="transparent" icon="refresh" size="regular" className={'cursor-pointer'} />
+          <Button
+            aria-label={`Remove ${fileItem.file.name}`}
+            appearance="transparent"
+            icon="refresh"
+            size="regular"
+            onClick={() => onDelete(fileItem.id)}
+            className={'cursor-pointer'}
+          />
         )}
         <Button
+          aria-label={`Remove ${fileItem.file.name}`}
           appearance="transparent"
           icon="close"
           size="regular"
@@ -121,13 +129,16 @@ const customCode = `() => {
       <React.Fragment>
         {fileItem.networkError && (
           <Button
+            aria-label={\`Remove \${fileItem.file.name}\`}
             appearance="transparent"
             icon="refresh"
             size="regular"
+            onClick={() => onDelete(fileItem.id)}
             className={'cursor-pointer'}
           />
         )}
         <Button
+          aria-label={\`Remove \${fileItem.file.name}\`}
           appearance="transparent"
           icon="close"
           size="regular"
@@ -172,6 +183,9 @@ export default {
     docs: {
       docPage: {
         customCode,
+        a11yProps: ` 
+        If you are using File list like shown above, don't forget to add \`\`aria-label\`\` to the button.
+         `,
       },
     },
   },

package/core/components/molecules/dropzone/__tests__/__snapshots__/Dropzone.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--compressed"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -26,14 +27,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -70,6 +70,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--standard"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -86,14 +87,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -140,14 +140,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -184,6 +183,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--compressed Dropzone-icon--disabled"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -200,14 +200,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--disabled Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="-1"
         >
-          <span
-            class="Text Text--disabled Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -244,6 +243,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--standard Dropzone-icon--disabled"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -260,14 +260,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--disabled Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="-1"
         >
-          <span
-            class="Text Text--disabled Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -314,14 +313,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--disabled Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="-1"
         >
-          <span
-            class="Text Text--disabled Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -358,6 +356,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--standard"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -374,14 +373,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -405,6 +403,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--standard"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -421,14 +420,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -453,6 +451,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--standard"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -469,14 +468,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"
@@ -500,6 +498,7 @@ exports[`Dropzone component snapshot
   >
     <i
       class="material-icons material-icons-round Icon Dropzone-icon Dropzone-icon--standard"
+      role="button"
       style="font-size: 64px; width: 64px;"
     >
       backup_round
@@ -516,14 +515,13 @@ exports[`Dropzone component snapshot
           Drag your files here or
         </span>
         <span
-          class="cursor-pointer"
+          aria-label="Drag your files here or click to select files"
+          class="Text Text--link Text--strong Text--large ml-2 cursor-pointer"
+          data-test="DesignSystem-Text"
+          role="button"
+          tabindex="0"
         >
-          <span
-            class="Text Text--link Text--strong Text--large"
-            data-test="DesignSystem-Text"
-          >
-            browse files
-          </span>
+          browse files
         </span>
         <input
           autocomplete="off"

package/core/components/molecules/editableDropdown/__tests__/__snapshots__/EditableDropdown.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`EditableDropdown component
               />
               <i
                 class="material-icons material-icons-round Icon Icon--default"
+                role="button"
                 style="font-size: 16px; width: 16px;"
               >
                 keyboard_arrow_down_round

package/core/components/molecules/fileList/__tests__/__snapshots__/FileList.test.tsx.snap

@@ -75,6 +75,7 @@ exports[`FileList component
           <i
             class="material-icons material-icons-round Icon FileIcon FileIcon--animate FileIcon--video"
             data-test="DesignSystem-FileListItem--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             movie_round
@@ -111,6 +112,7 @@ exports[`FileList component
           <i
             class="material-icons material-icons-round Icon FileIcon FileIcon--image"
             data-test="DesignSystem-FileListItem--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             image_round
@@ -142,6 +144,7 @@ exports[`FileList component
         >
           <i
             class="material-icons material-icons-round Icon Icon--alert"
+            role="button"
             style="font-size: 14px; width: 14px;"
           >
             error_round
@@ -168,6 +171,7 @@ exports[`FileList component
           <i
             class="material-icons material-icons-round Icon FileIcon FileIcon--animate FileIcon--application"
             data-test="DesignSystem-FileListItem--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             insert_drive_file_round
@@ -204,6 +208,7 @@ exports[`FileList component
           <i
             class="material-icons material-icons-round Icon FileIcon FileIcon--animate FileIcon--others"
             data-test="DesignSystem-FileListItem--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             text_snippet_round

package/core/components/molecules/fileUploader/__tests__/__snapshots__/FileUploader.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`FileUploader component
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             backup_round
@@ -94,6 +95,7 @@ exports[`FileUploader component prop:accept snapshot
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             backup_round
@@ -148,6 +150,7 @@ exports[`FileUploader component prop:disabled snapshot
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             backup_round
@@ -202,6 +205,7 @@ exports[`FileUploader component prop:disabled snapshot
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             backup_round
@@ -256,6 +260,7 @@ exports[`FileUploader component prop:multiple snapshot
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             backup_round
@@ -309,6 +314,7 @@ exports[`FileUploader component prop:multiple snapshot
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             backup_round