feat: add aria attributes and docs

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -17,6 +17,92 @@ import {
 } from './common'
 import { SelectPickerOptionType, SelectPickerProps } from './type'
 
+/**
+ * Generic component for select picker
+ *
+ * @example With icon in control
+ * ```tsx
+ * <SelectPicker ... icon={<CustomIcon />} />
+ * ```
+ *
+ * @example Medium menu list width
+ * ```tsx
+ * <SelectPicker ... menuSize={ComponentSizeType.medium} />
+ * ```
+ *
+ * @example Large menu list width
+ * ```tsx
+ * <SelectPicker ... menuSize={ComponentSizeType.large} />
+ * ```
+ *
+ * @example Required label
+ * ```tsx
+ * <SelectPicker ... required label="Label" />
+ * ```
+ *
+ * @example Custom label
+ * ```tsx
+ * <SelectPicker ... label={<div>Label</div>} />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <SelectPicker ... error="Something went wrong" />
+ * ```
+ *
+ * @example Custom label
+ * ```tsx
+ * <SelectPicker ... label={<div>Label</div>} />
+ * ```
+ *
+ * @example Helper text
+ * ```tsx
+ * <SelectPicker ... helperText="Help information" />
+ * ```
+ *
+ * @example Menu list footer
+ * The footer is sticky by default
+ * ```tsx
+ * <SelectPicker
+ *      ...
+ *      renderMenuListFooter={() => (
+ *          <div className="px-8 py-6 dc__border-top bcn-50 cn-6">
+ *              <div>Foot note</div>
+ *          </div>
+ *      )}
+ * />
+ * ```
+ *
+ * @example Loading state
+ * ```tsx
+ * <SelectPicker ... isLoading />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <SelectPicker ... isDisabled />
+ * ```
+ *
+ * @example Loading & disabled state
+ * ```tsx
+ * <SelectPicker ... isLoading isDisabled />
+ * ```
+ *
+ * @example Hide selected option icon in control
+ * ```tsx
+ * <SelectPicker ... showSelectedOptionIcon={false} />
+ * ```
+ *
+ * @example Selected option clearable
+ * ```tsx
+ * <SelectPicker ... isClearable />
+ * ```
+ *
+ * @example Selected option clearable
+ * ```tsx
+ * <SelectPicker ... showSelectedOptionsCount />
+ * ```
+ */
 const SelectPicker = ({
     error,
     icon,
@@ -33,6 +119,9 @@ const SelectPicker = ({
 }: SelectPickerProps) => {
     const { inputId, required, isDisabled } = props
 
+    const labelId = `${inputId}-label`
+    const errorElementId = `${inputId}-error-msg`
+
     const selectStyles = useMemo(
         () =>
             getCommonSelectStyle({
@@ -79,6 +168,7 @@ const SelectPicker = ({
                         className="fs-13 lh-20 cn-7 fw-4 dc__block mb-0"
                         htmlFor={inputId}
                         data-testid={`label-${inputId}`}
+                        id={labelId}
                     >
                         {typeof label === 'string' ? (
                             <span className={`flex left ${required ? 'dc__required-field' : ''}`}>
@@ -110,12 +200,15 @@ const SelectPicker = ({
                             menuPosition="fixed"
                             menuShouldScrollIntoView
                             backspaceRemovesValue={false}
+                            aria-errormessage={errorElementId}
+                            aria-invalid={!!error}
+                            aria-labelledby={labelId}
                         />
                     </div>
                 </ConditionalWrap>
             </div>
             {error && (
-                <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4">
+                <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4" id={errorElementId}>
                     <ErrorIcon className="icon-dim-16 p-1 form__icon--error dc__no-shrink dc__align-self-start" />
                     <span className="dc__ellipsis-right__2nd-line">{error}</span>
                 </div>

src/Shared/Components/SelectPicker/type.ts

@@ -21,19 +21,34 @@ export interface SelectPickerProps
             | 'isSearchable'
             | 'isClearable'
             | 'isLoading'
-            | 'placeholder'
             | 'hideSelectedOptions'
             | 'controlShouldRenderValue'
             | 'closeMenuOnSelect'
             | 'isDisabled'
             | 'isLoading'
             | 'required'
+            | 'isOptionDisabled'
         >,
-        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
+        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name' | 'placeholder'>> {
+    /**
+     * Icon to be rendered in the control
+     */
     icon?: ReactElement
+    /**
+     * Error message for the select
+     */
     error?: ReactNode
+    /**
+     * Render function for the footer at the bottom of menu list. It is sticky by default
+     */
     renderMenuListFooter?: () => ReactNode
+    /**
+     * Info text for the select, if any
+     */
     helperText?: ReactNode
+    /**
+     * Label for the select. if required is added, the corresponding * is also added
+     */
     label?: ReactNode
     /**
      * If true, the selected option icon is shown in the container.