Merge branch 'main' into selected-structured-list

.github/workflows/add-to-project.yml

@@ -19,7 +19,7 @@ jobs:
     name: Add issue with enhancement label to the Proposals project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@v0.4.1
+      - uses: actions/add-to-project@v0.5.0
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}
           project-url: ${{ env.PROPOSALS_PROJECT_URL }}
@@ -29,7 +29,7 @@ jobs:
     name: Add issue with typescript label to the TypeScript Adoption project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@v0.4.1
+      - uses: actions/add-to-project@v0.5.0
         with:
           labeled: ${{ env.LABEL_TYPESCRIPT }}
           project-url: ${{ env.TYPESCRIPT_PROJECT_URL }}
@@ -39,7 +39,7 @@ jobs:
     name: Add issue to the Design System project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@v0.4.1
+      - uses: actions/add-to-project@v0.5.0
         with:
           labeled: ${{ env.LABEL_ENHANCEMENT }}, ${{ env.LABEL_TYPESCRIPT }}
           label-operator: NOT

.github/workflows/deploy-packages.yml

@@ -40,7 +40,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           branch: 'release/update-carbon-deps-${{ github.ref }}'
           commit-message: 'chore(release): update carbon deps'
@@ -82,7 +82,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           branch: 'release/update-carbon-deps-${{ github.ref }}'
           commit-message: 'chore(release): update carbon deps'

.github/workflows/version.yml

@@ -69,7 +69,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           branch: 'release/${{ github.event.inputs.tag }}'
           commit-message: 'chore(release): ${{ github.event.inputs.tag }}'

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -561,6 +561,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                   {...readOnlyEventHandlers}
                   readOnly={readOnly}
                   ref={mergeRefs(textInput, ref)}
+                  aria-describedby={
+                    helperText && !invalid && !warn && !isFluid
+                      ? comboBoxHelperId
+                      : undefined
+                  }
                 />
                 {invalid && (
                   <WarningFilled

packages/react/src/components/DatePicker/DatePicker.js

@@ -224,9 +224,39 @@ const DatePicker = React.forwardRef(function DatePicker(
     }
   }, []);
   const endInputField = useRef(null);
+
+  const lastStartValue = useRef('');
+
+  // fix datepicker deleting the selectedDate when the calendar closes
+  const onCalendarClose = (selectedDates, dateStr) => {
+    setTimeout(() => {
+      if (
+        lastStartValue.current &&
+        selectedDates[0] &&
+        !startInputField.current.value
+      ) {
+        startInputField.current.value = lastStartValue.current;
+        calendarRef.current.setDate(
+          [startInputField.current.value, endInputField.current.value],
+          true,
+          calendarRef.current.config.dateFormat
+        );
+      }
+      if (onClose) {
+        onClose(
+          calendarRef.current.selectedDates,
+          dateStr,
+          calendarRef.current
+        );
+      }
+    });
+  };
+
   const calendarRef = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
-  const savedOnClose = useSavedCallback(onClose);
+  const savedOnClose = useSavedCallback(
+    datePickerType === 'range' ? onCalendarClose : onClose
+  );
   const savedOnOpen = useSavedCallback(onOpen);
 
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -350,6 +380,7 @@ const DatePicker = React.forwardRef(function DatePicker(
         carbonFlatpickrFixEventsPlugin({
           inputFrom: startInputField.current,
           inputTo: endInputField.current,
+          lastStartValue,
         }),
       ],
       clickOpens: !readOnly,
@@ -398,11 +429,16 @@ const DatePicker = React.forwardRef(function DatePicker(
       }
     }
 
-    function handleOnChange() {
+    function handleOnChange(event) {
       if (datePickerType == 'single') {
         calendar.calendarContainer.classList.remove('open');
       }
 
+      const { target } = event;
+      if (target === start) {
+        lastStartValue.current = start.value;
+      }
+
       if (start.value !== '') {
         return;
       }

packages/react/src/components/DatePicker/DatePicker.stories.js

@@ -248,4 +248,10 @@ Playground.argTypes = {
       category: 'DatePickerInput',
     },
   },
+  helperText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
 };

packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js

@@ -51,7 +51,7 @@ export default (config) => (fp) => {
    * set the date again, triggering the calendar to update.
    */
   const handleBlur = (event) => {
-    const { inputFrom, inputTo } = config;
+    const { inputFrom, inputTo, lastStartValue } = config;
     const { target } = event;
 
     // Only fall into this logic if the event is on the `to` input and there is a
@@ -91,6 +91,22 @@ export default (config) => (fp) => {
         );
       }
     }
+
+    // overriding the flatpickr bug where the startDate gets deleted on blur
+    if (inputTo === target && !inputFrom.value && lastStartValue.current) {
+      let currentStartDate = new Date(lastStartValue.current);
+
+      if (currentStartDate.toString() !== 'Invalid Date') {
+        inputFrom.value = lastStartValue.current;
+        if (inputTo.value) {
+          fp.setDate(
+            [inputFrom.value, inputTo.value],
+            true,
+            fp.config.dateFormat
+          );
+        }
+      }
+    }
   };
 
   /**

packages/react/src/components/DatePickerInput/DatePickerInput.js

@@ -11,6 +11,9 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
   const {
@@ -34,6 +37,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
   } = props;
   const prefix = usePrefix();
   const { isFluid } = useContext(FormContext);
+  const datePickerInputInstanceId = getInstanceId();
   const datePickerInputProps = {
     id,
     onChange: (event) => {
@@ -73,12 +77,17 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
     [`${prefix}--date-picker--fluid--warn`]: isFluid && warn,
   });
 
+  const datePickerInputHelperId = !helperText
+    ? undefined
+    : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+
   const inputProps = {
     ...rest,
     ...datePickerInputProps,
     className: inputClasses,
     disabled,
     ref,
+    ['aria-describedby']: helperText ? datePickerInputHelperId : undefined,
   };
   if (invalid) {
     inputProps['data-invalid'] = true;
@@ -113,7 +122,11 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
           <div className={`${prefix}--form-requirement`}>{warnText}</div>
         </>
       )}
-      {helperText && <div className={helperTextClasses}>{helperText}</div>}
+      {helperText && (
+        <div id={datePickerInputHelperId} className={helperTextClasses}>
+          {helperText}
+        </div>
+      )}
     </div>
   );
 });

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -33,6 +33,9 @@ import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { ReactAttr } from '../../types/common';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const defaultItemToString = <ItemType,>(item?: ItemType): string => {
   if (typeof item === 'string') {
@@ -248,6 +251,7 @@ const Dropdown = React.forwardRef(
       initialSelectedItem,
       onSelectedItemChange,
     };
+    const { current: dropdownInstanceId } = useRef(getInstanceId());
 
     // only set selectedItem if the prop is defined. Setting if it is undefined
     // will overwrite default selected items from useSelect
@@ -311,12 +315,18 @@ const Dropdown = React.forwardRef(
       }
     );
 
+    const helperId = !helperText
+      ? undefined
+      : `dropdown-helper-text-${dropdownInstanceId}`;
+
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
     const toggleButtonProps = getToggleButtonProps();
     const helper =
       helperText && !isFluid ? (
-        <div className={helperClasses}>{helperText}</div>
+        <div id={helperId} className={helperClasses}>
+          {helperText}
+        </div>
       ) : null;
 
     function onSelectedItemChange({
@@ -392,6 +402,9 @@ const Dropdown = React.forwardRef(
             className={`${prefix}--list-box__field`}
             disabled={disabled}
             aria-disabled={readOnly ? true : undefined} // aria-disabled to remain focusable
+            aria-describedby={
+              !inline && !invalid && !warn && helper ? helperId : undefined
+            }
             title={
               selectedItem && itemToString !== undefined
                 ? itemToString(selectedItem)

packages/react/src/components/MultiSelect/MultiSelect.tsx

@@ -565,6 +565,9 @@ const MultiSelect = React.forwardRef(function MultiSelect<ItemType>(
             className={`${prefix}--list-box__field`}
             disabled={disabled}
             aria-disabled={disabled || readOnly}
+            aria-describedby={
+              !inline && !invalid && !warn && helperText ? helperId : undefined
+            }
             {...toggleButtonProps}
             ref={mergedRef}
             onKeyDown={onKeyDown}

packages/react/src/components/NumberInput/NumberInput.tsx

@@ -292,6 +292,9 @@ const NumberInput = React.forwardRef(function NumberInput(
   if (normalizedProps.warn) {
     ariaDescribedBy = normalizedProps.warnId;
   }
+  if (!normalizedProps.validation) {
+    ariaDescribedBy = helperText ? normalizedProps.helperId : undefined;
+  }
 
   function handleOnChange(event) {
     if (disabled) {
@@ -441,7 +444,11 @@ const NumberInput = React.forwardRef(function NumberInput(
         {normalizedProps.validation ? (
           normalizedProps.validation
         ) : (
-          <HelperText disabled={disabled} description={helperText} />
+          <HelperText
+            id={normalizedProps.helperId}
+            disabled={disabled}
+            description={helperText}
+          />
         )}
       </div>
     </div>
@@ -619,24 +626,30 @@ Label.propTypes = {
 };
 
 interface HelperTextProps {
+  id?: string;
   description?: ReactNode;
   disabled?: boolean;
 }
-function HelperText({ disabled, description }: HelperTextProps) {
+function HelperText({ disabled, description, id }: HelperTextProps) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled,
   });
 
   if (description) {
-    return <div className={className}>{description}</div>;
+    return (
+      <div id={id} className={className}>
+        {description}
+      </div>
+    );
   }
   return null;
 }
 
 HelperText.propTypes = {
   description: PropTypes.node,
   disabled: PropTypes.bool,
+  id: PropTypes.string,
 };
 
 /**

packages/react/src/components/ProgressBar/ProgressBar.js

@@ -26,6 +26,7 @@ function ProgressBar({
 }) {
   const labelId = useId('progress-bar');
   const helperId = useId('progress-bar-helper');
+  const helperTextId = useId('progress-bar-helper-text');
   const prefix = usePrefix();
 
   const isFinished = status === 'finished';
@@ -101,13 +102,16 @@ function ProgressBar({
         aria-busy={!isFinished}
         aria-invalid={isError}
         aria-labelledby={labelId}
+        aria-describedby={helperText ? helperTextId : undefined}
         aria-valuemin={!indeterminate ? 0 : null}
         aria-valuemax={!indeterminate ? max : null}
         aria-valuenow={!indeterminate ? cappedValue : null}>
         <div className={`${prefix}--progress-bar__bar`} ref={ref} />
       </div>
       {helperText && (
-        <div className={`${prefix}--progress-bar__helper-text`}>
+        <div
+          id={helperTextId}
+          className={`${prefix}--progress-bar__helper-text`}>
           {helperText}
           <div
             className={`${prefix}--visually-hidden`}

packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -214,6 +214,7 @@ const RadioButtonGroup = React.forwardRef(
           disabled={disabled}
           data-invalid={invalid ? true : undefined}
           aria-readonly={readOnly}
+          aria-describedby={showHelper && helperText ? helperId : undefined}
           {...rest}>
           {legendText && (
             <Legend className={`${prefix}--label`}>{legendText}</Legend>