@popsure/dirty-swan 0.57.8 → 0.58.0

package/src/lib/components/input/checkbox/index.stories.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { Checkbox, CheckboxProps } from '.';
 import { images } from '../../../util/images';
@@ -9,28 +8,36 @@ const story = {
   component: Checkbox,
   argTypes: {
     options: {
-      description: 'Object that contains the possible options for rendering in the input.',
+      description:
+        'Object that contains the possible options for rendering in the input.',
     },
     value: {
       description: 'Current checked values.',
     },
+    fieldLegend: {
+      description:
+        'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',
+    },
     onChange: {
       description: 'Function called everytime a value changes.',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
     wide: {
-      description: 'Property that defines if options should fill 100% of available horizontal space',
-      defaultValue: false
+      description:
+        'Property that defines if options should fill 100% of available horizontal space',
+      defaultValue: false,
     },
     bordered: {
       control: 'boolean',
-      description: 'Property that defines if checkbox should show the border around each label',
+      description:
+        'Property that defines if checkbox should show the border around each label',
     },
     inlineLayout: {
-      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
+      description:
+        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
     },
     className: {
       description: 'ClassNames for custom styling',
@@ -38,133 +45,144 @@ const story = {
   },
   args: {
     options: {
-      CAT:{
+      CAT: {
         title: 'Cat',
-        description: 'At least 1'
+        description: 'At least 1',
       },
-      DOG:{
+      DOG: {
         title: 'Dog',
-        description: 'At least 2'
+        description: 'At least 2',
       },
-      NONE:{
+      NONE: {
         title: 'None',
-        description: 'No pets'
-      }
+        description: 'No pets',
+      },
     },
+    fieldLegend: 'Owned pets',
     wide: false,
     bordered: true,
     inlineLayout: false,
     classNames: {
       container: '',
       label: '',
-      option: ''
+      option: '',
     },
     value: [],
-    className: ''
-  }
+    className: '',
+  },
 };
 
-export const CheckboxStory = ({ 
+export const CheckboxStory = ({
   onChange,
   options,
   wide,
   bordered,
   classNames,
   inlineLayout,
+  fieldLegend,
 }: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
 
   const handleOnChange = (newValue: string[]) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Checkbox 
+    <Checkbox
       wide={wide}
-      options={options} 
+      options={options}
       onChange={handleOnChange}
       value={checkedValues}
       bordered={bordered}
       classNames={classNames}
       inlineLayout={inlineLayout}
+      fieldLegend={fieldLegend}
     />
   );
-}
+};
 
-export const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithCustomWrapperStyles = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
 
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Checkbox 
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT1: 'Cat',
         DOG1: 'Dog',
-      }} 
-      classNames={{ container: "p32 bg-primary-300 br24 bs-lg" }}
+      }}
+      classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}
     />
   );
-}
+};
 
-export const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithCustomOptionStyles = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
 
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Checkbox 
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT2: 'Cat',
         DOG2: 'Dog',
-      }} 
-      classNames={{ option: "mb32 p24 bg-green-100 br12 bs-lg" }}
+      }}
+      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
     />
   );
-}
+};
 
-export const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithCustomLabelStyles = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
 
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Checkbox 
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT3: 'Cat',
         DOG3: 'Dog',
-      }} 
-      classNames={{ label: "bg-grey-900 tc-white" }}
+      }}
+      classNames={{ label: 'bg-grey-900 tc-white' }}
     />
   );
-}
+};
 
-export const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {
+export const CheckboxWithInlineLayout = ({
+  onChange,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
 
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Checkbox 
+    <Checkbox
       onChange={handleOnChange}
       value={checkedValues}
       options={{
@@ -174,45 +192,50 @@ export const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) =>
         RABBIT: 'Rabbit',
         RAT: 'Rat',
         ANOTHER: 'Other',
-      }} 
-      classNames={{ option: "w30" }}
+      }}
+      classNames={{ option: 'w30' }}
       inlineLayout
       wide
     />
   );
-}
+};
 
-export const CheckboxWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => {
+export const CheckboxWithCustomLabel = ({
+  onChange,
+  wide,
+  classNames,
+  inlineLayout,
+}: CheckboxProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string[]>([]);
 
   const handleOnChange = (newValue: string[] = []) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Checkbox 
+    <Checkbox
       options={{
         BIGDOG: {
-          icon: () => <img src={images.bigDog} alt='' />,
+          icon: () => <img src={images.bigDog} alt="" />,
           title: 'Dog',
         },
-        FISH:{
-          icon: () => <img src={images.brokenAquarium} alt='' />,
+        FISH: {
+          icon: () => <img src={images.brokenAquarium} alt="" />,
           title: 'Fish',
         },
-        OTHER:{
-          icon: () => <img src={images.brokenGlass} alt='' />,
+        OTHER: {
+          icon: () => <img src={images.brokenGlass} alt="" />,
           title: 'Other',
-        }
-      }} 
+        },
+      }}
       onChange={handleOnChange}
       value={checkedValues}
-      classNames={{ option: "w30" }}
+      classNames={{ option: 'w30' }}
       inlineLayout
     />
   );
-}
+};
 
 CheckboxStory.storyName = 'Checkbox';
 

package/src/lib/components/input/checkbox/index.tsx

@@ -20,6 +20,7 @@ export interface CheckboxProps<ValueType extends string> {
     label?: string;
     option?: string;
   };
+  fieldLegend?: string;
 }
 
 export const Checkbox = <ValueType extends string>({
@@ -30,6 +31,7 @@ export const Checkbox = <ValueType extends string>({
   inlineLayout = false,
   bordered = true,
   classNames: classNamesObj,
+  fieldLegend,
 }: CheckboxProps<ValueType> & {}) => {
   const hasNoneValue = Object.keys(options).includes('NONE');
 
@@ -71,8 +73,14 @@ export const Checkbox = <ValueType extends string>({
     return (label as CheckboxWithDescription).title !== undefined;
   };
 
+  const legend =
+    fieldLegend ??
+    (Object.keys(options).length > 1
+      ? 'Select one or more options'
+      : 'You may select this option');
+
   return (
-    <div
+    <fieldset
       className={classNames(
         classNamesObj?.container,
         styles.container,
@@ -85,6 +93,7 @@ export const Checkbox = <ValueType extends string>({
         }
       )}
     >
+      <legend className="sr-only">{legend}</legend>
       {entries.map(([currentValue, label]) => {
         const checked = value?.includes(currentValue);
         const customIcon = (label as CheckboxWithDescription)?.icon;
@@ -129,6 +138,6 @@ export const Checkbox = <ValueType extends string>({
           </div>
         );
       })}
-    </div>
+    </fieldset>
   );
 };

package/src/lib/components/input/checkbox/styles.module.scss

@@ -1,5 +1,9 @@
 .container {
   max-width: 100%;
+  border: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0.01em 0 0 0;
 }
 
 .narrow {

package/src/lib/components/input/index.tsx

@@ -64,6 +64,8 @@ export const Input = React.forwardRef(
             )}
             placeholder={label || labelInsideInput ? placeholder : ' '}
             disabled={disabled}
+            aria-invalid={!!error}
+            aria-errormessage={error ? error : undefined}
             {...props}
           />
           {prefix && (

package/src/lib/components/input/radio/index.stories.tsx

@@ -13,6 +13,14 @@ const story = {
     value: {
       description: 'Current checked values.',
     },
+    fieldLegend: {
+      description:
+        'Property that describes the purpose of a group of radio buttons, read aloud by screen readers to provide context.',
+    },
+    groupName: {
+      description:
+        'Property passed to each radio button. Informs the browser that the radio buttons belong to the same group, so only one can be selected',
+    },
     onChange: {
       description: 'Function called everytime a value changes.',
       action: true,
@@ -29,7 +37,8 @@ const story = {
         'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',
     },
     inlineIcon: {
-      description: 'Property that defines if options should show inline with icon',
+      description:
+        'Property that defines if options should show inline with icon',
     },
     classNames: {
       description: 'ClassNames for custom styling',
@@ -57,6 +66,8 @@ const story = {
         description: 'No pets',
       },
     },
+    fieldLegend: 'Owned pets',
+    groupName: 'Pets',
     value: '',
     wide: false,
     classNames: {
@@ -68,7 +79,7 @@ const story = {
     inlineLayout: false,
     inlineIcon: false,
     disabled: false,
-  }
+  },
 };
 
 export const RadioStory = ({
@@ -79,6 +90,8 @@ export const RadioStory = ({
   inlineLayout,
   bordered,
   disabled,
+  fieldLegend,
+  groupName,
 }: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
@@ -97,6 +110,8 @@ export const RadioStory = ({
       inlineLayout={inlineLayout}
       bordered={bordered}
       disabled={disabled}
+      fieldLegend={fieldLegend}
+      groupName={groupName}
     />
   );
 };

package/src/lib/components/input/radio/index.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { ReactNode } from 'react';
 
 import styles from './styles.module.scss';
+import generateId from '../../../util/generateId';
 export interface RadioWithDescription {
   title: ReactNode;
   description?: string;
@@ -23,6 +24,8 @@ export interface RadioProps<ValueType extends string> {
   };
   bordered?: boolean;
   disabled?: boolean;
+  fieldLegend?: string;
+  groupName?: string;
 }
 
 export const Radio = <ValueType extends string>({
@@ -35,14 +38,18 @@ export const Radio = <ValueType extends string>({
   classNames: classNamesObj,
   bordered = true,
   disabled = false,
+  fieldLegend = 'Select an option',
+  groupName,
 }: RadioProps<ValueType>) => {
   const entries = Object.entries(options) as [
     ValueType,
     ReactNode | RadioWithDescription
   ][];
 
+  const name = groupName ?? generateId();
+
   return (
-    <div
+    <fieldset
       className={classNames(
         classNamesObj?.container,
         styles.container,
@@ -56,6 +63,7 @@ export const Radio = <ValueType extends string>({
         }
       )}
     >
+      <legend className="sr-only">{fieldLegend}</legend>
       {entries.map(([currentValue, label]) => {
         const checked = value === currentValue;
         const customIcon = (label as RadioWithDescription)?.icon;
@@ -81,6 +89,7 @@ export const Radio = <ValueType extends string>({
               checked={checked}
               data-testid={`radio-input-${currentValue}`}
               disabled={disabled}
+              name={name}
             />
 
             <label
@@ -118,6 +127,6 @@ export const Radio = <ValueType extends string>({
           </div>
         );
       })}
-    </div>
+    </fieldset>
   );
 };

package/src/lib/components/input/radio/styles.module.scss

@@ -1,5 +1,9 @@
 .container {
   max-width: 100%;
+  border: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0.01em 0 0 0;
 }
 
 .narrow {
@@ -8,4 +12,4 @@
 
 .wide {
   max-width: 736px;
-}
+}

package/src/lib/components/multiDropzone/UploadFileCell/index.tsx

@@ -5,6 +5,7 @@ import styles from './style.module.scss';
 import { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';
 import { Color } from '../../../models/styles';
 import { UploadStatus, UploadedFile } from '../types';
+import { Button } from '../../button';
 
 interface Props {
   uploadStatus: UploadStatus;
@@ -94,35 +95,40 @@ const UploadFileCell: React.FC<Props> = ({
         ) : (
           <>
             {isComplete && (
-              <a
-                className={styles['view-icon']}
+              <Button
+                as="a"
                 href={previewUrl}
                 target="_blank"
                 rel="noopener noreferrer"
+                hideLabel
+                variant="filledWhite"
+                className={classnames('mr16', styles.button)}
+                leftIcon={
+                  <EyeVisionIcon noMargin color={'grey-500'} size={24} />
+                }
               >
-                <EyeVisionIcon
-                  color={'grey-500'}
-                  size={24}
-                  className={styles.icon}
-                />
-              </a>
+                Preview file
+              </Button>
             )}
 
             {onRemoveFile && (
-              <button
-                type="button"
+              <Button
                 onClick={() => onRemoveFile(id)}
-                className={classnames(styles['remove-icon'], {
-                  [styles.disabled]: uploading,
-                })}
+                disabled={uploading}
                 data-testid="remove-button"
+                className={styles.button}
+                leftIcon={
+                  <Trash2Icon
+                    color={hasError ? 'red-500' : 'grey-500'}
+                    size={24}
+                    noMargin
+                  />
+                }
+                hideLabel
+                variant="filledWhite"
               >
-                <Trash2Icon
-                  color={hasError ? 'red-500' : 'grey-500'}
-                  size={24}
-                  className={styles.icon}
-                />
-              </button>
+                Delete file
+              </Button>
             )}
           </>
         )}

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -27,10 +27,6 @@
   align-items: center;
 }
 
-.icon {
-  margin: 0px;
-}
-
 .main-icon {
   margin-right: 16px;
 }
@@ -64,39 +60,25 @@
 
 .cell-right-section {
   display: flex;
-  justify-content: flex-end;
-  min-width: 32px;
-  margin-left: 16px;
 }
 
 .cell-right-section-complete {
   min-width: 64px;
 }
 
-.view-icon,
-.remove-icon {
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  color: inherit;
-  text-align: inherit;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
+.button {
+  width: 32px;
 
-.remove-icon {
-  margin-left: 16px;
-}
+  div span span {
+    min-width: 24px !important;
+    height: 24px !important;
+  }
 
-.disabled {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.3;
+  &:focus-visible {
+    outline: 2px solid $ds-grey-900;
+    border-radius: 2px;
+    outline-offset: 2px;
+  }
 }
 
 @keyframes appear-down {

package/src/lib/components/multiDropzone/index.tsx

@@ -10,6 +10,7 @@ import {
   formatAcceptFileList,
   getErrorMessage,
   getFormattedAcceptObject,
+  getStatusMessage,
   getUploadStatus,
 } from './utils';
 
@@ -48,6 +49,7 @@ const MultiDropzone = ({
   textOverrides,
 }: MultiDropzoneProps) => {
   const [errors, setErrors] = useState<ErrorMessage[]>([]);
+  const [statusMessage, setStatusMessage] = useState('');
   const formattedAccept = getFormattedAcceptObject(accept);
   const fileList = formatAcceptFileList(formattedAccept);
   const placeholder = getPlaceholder(textOverrides, accept, maxSize);
@@ -60,6 +62,15 @@ const MultiDropzone = ({
     (acceptedFiles: File[], filesRejected: FileRejection[]) => {
       onFileSelect(acceptedFiles);
 
+      const messageForScreenReader = getStatusMessage({
+        acceptedFiles,
+        filesRejected,
+        fileList,
+        maxSize,
+        textOverrides,
+      });
+      setStatusMessage(messageForScreenReader);
+
       setErrors((previousErrors) => [
         ...previousErrors,
         ...filesRejected.map(({ errors }) => ({
@@ -93,10 +104,10 @@ const MultiDropzone = ({
         )}
         {...getRootProps()}
       >
-        <input
-          data-testid="ds-drop-input"
-          {...getInputProps()}
-        />
+        <div className="sr-only" aria-live="polite" aria-atomic="true">
+          {statusMessage}
+        </div>
+        <input data-testid="ds-drop-input" {...getInputProps()} />
         <UploadCloudIcon
           className={isCondensed ? styles.img : ''}
           size={isCondensed ? 24 : 64}
@@ -151,7 +162,8 @@ const MultiDropzone = ({
 
       <AnimateHeight duration={300} height={isOverMaxFiles ? 'auto' : 0}>
         <p className="tc-red-500 mt16">
-          {textOverrides?.tooManyFilesError || `You can upload maximum ${maxFiles} files.`}
+          {textOverrides?.tooManyFilesError ||
+            `You can upload maximum ${maxFiles} files.`}
         </p>
       </AnimateHeight>
     </div>