Merge pull request #56 from a-ui/bugfix/several-bug-fixes

NicolasYapla · web-flow · commit 22dfcc254819 · 2026-03-12T17:38:47.000+01:00
Several bug fixes
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 7.xx.xx - xxxx-xx-xx
+
+### Added
+
+- Added `required` prop on Upload component
+- Added `description` and `state` properties to the `RadioGroup` component
+- Added `required` property to the `Checkbox` component
+- Added `required` prop to the `Checkbox` component
+- Added `required` prop to the `RadioGroup` component
+- Added `required` prop to the `Radio` component (not visible in the UI)
+- Added `disabled` property to the `Autocomplete` component
+
+### Fixed
+
+- Fixed `Select` component selecting the first option when `value` is empty string; empty string now correctly shows the placeholder.
+- Fixed a margin bottom issue with the inline alert title
+- Fixed the `aria-describedby` attribute not being linked to `description` text in Datepicker component
+- Fixed the required asterisk not being hidden from screen readers
+- Fixed not being able to submit the form when the `Autocomplete` component is open
+
 ## 7.11.1 - 2026-01-07
 
 ### Fixed
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@nrwl/react": "15.8.7",
     "@nrwl/vite": "15.8.7",
     "@nrwl/workspace": "15.8.7",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^20.0.1",
diff --git a/packages/antwerp-ui/react-components/package.json b/packages/antwerp-ui/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a-ui/react",
-  "version": "7.11.0",
+  "version": "7.11.2",
   "license": "MIT",
   "main": "./index.js",
   "types": "./index.d.ts",
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.spec.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.spec.tsx
@@ -8,7 +8,8 @@ describe('UI Components - Atoms - Checkbox', () => {
   const defaultProps: CheckboxProps = {
     label: 'Checkbox',
     id: 'checkbox',
-    name: 'checkbox'
+    name: 'checkbox',
+    required: false
   };
 
   it('renders a checkbox with the given label', () => {
@@ -56,4 +57,11 @@ describe('UI Components - Atoms - Checkbox', () => {
     fireEvent.click(getByLabelText('Checkbox'));
     expect(mockOnChange).toHaveBeenCalled();
   });
+
+  it('adds a red asterisk to the label when the required prop is true', () => {
+    const { getByLabelText } = render(<Checkbox {...defaultProps} required />);
+    const checkbox = getByLabelText(/Checkbox/) as HTMLInputElement;
+    expect(checkbox).toHaveProperty('required', true);
+    expect(checkbox.parentElement?.querySelector('.u-text-danger')).toBeInTheDocument();
+  });
 });
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.stories.jsx b/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.stories.jsx
@@ -22,7 +22,8 @@ export default {
     disabled: false,
     indeterminate: false,
     id: 'checkbox-example',
-    name: 'agree-checkbox'
+    name: 'agree-checkbox',
+    required: false
   },
   argTypes: {
     label: {
@@ -50,6 +51,15 @@ export default {
       description:
         'Checked state. When this prop is set, the `Checkbox` becomes a controlled component; use it together with `onChange`.'
     },
+    required: {
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      description:
+        'The `required` prop adds a red asterisk to the `Checkbox` label and adds the required attribute to the HTML checkbox field.'
+    },
     disabled: {
       control: { type: 'boolean' },
       table: {
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent } from 'react';
 import { SCREEN_READER_CLASS } from '../../../constants/settings';
 import { classNames } from '../../../utils/dom.utils';
+import { renderRequiredAsterisk } from '../../../utils/render.utils';
 import { CheckboxProps } from './Checkbox.types';
 
 export function Checkbox({
@@ -12,7 +13,8 @@ export function Checkbox({
   name,
   disabled,
   indeterminate,
-  onChange
+  onChange,
+  required = false
 }: CheckboxProps) {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     return onChange && onChange(event);
@@ -40,9 +42,11 @@ export function Checkbox({
         ref={setIndeterminate}
         disabled={disabled}
         onChange={handleChange}
+        required={required}
       />
       <label htmlFor={id}>
         <span className={showLabel ? undefined : SCREEN_READER_CLASS}>{label}</span>
+        {required && renderRequiredAsterisk()}
       </label>
     </div>
   );
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.types.ts b/packages/antwerp-ui/react-components/src/lib/atoms/checkbox/Checkbox.types.ts
@@ -10,4 +10,5 @@ export interface CheckboxProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   qa?: string;
   showLabel?: boolean;
+  required?: boolean;
 }
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/input/Input.types.ts b/packages/antwerp-ui/react-components/src/lib/atoms/input/Input.types.ts
@@ -22,6 +22,7 @@ interface InputProps {
 }
 
 export interface TextFieldProps extends InputProps {
+  ariaDescribedBy?: string;
   addOn?: {
     type: 'icon' | 'text' | 'spinner';
     size?: 'small' | 'medium' | 'large';
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/input/input.renders.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/input/input.renders.tsx
@@ -1,5 +1,6 @@
 import { State, Theme, THEME_ICON_MAP } from '../../../constants/layout.settings';
 import { classNames } from '../../../utils/dom.utils';
+import { renderRequiredAsterisk } from '../../../utils/render.utils';
 import { Icon } from '../../base/icon';
 import { DescriptionProps, LabelProps, CharacterCounterProps } from './Input.types';
 
@@ -12,7 +13,7 @@ export const renderLabel = ({ label, id, required, inline, className = '', noMar
   return label ? (
     <label className={labelClasses} htmlFor={id}>
       {label}
-      {required && <span className="u-text-danger">*</span>}
+      {required && renderRequiredAsterisk()}
     </label>
   ) : null;
 };
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/input/text-field/TextField.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/input/text-field/TextField.tsx
@@ -11,6 +11,7 @@ export const TextField = forwardRef(function TextField(
   {
     addOn,
     autoComplete,
+    ariaDescribedBy = '',
     charCounter,
     charCountText,
     description,
@@ -48,10 +49,10 @@ export const TextField = forwardRef(function TextField(
   const toggleCharCounter = charCounter !== undefined ? charCounter : maxLength ? true : false;
   const charCounterText = charCountText ? charCountText : maxLength ? '%count% / %max%' : '%count%';
 
-  const describedBy = [
-    toggleCharCounter ? `${id}--counter` : null,
-    description ? `${id}--description` : null
-  ].filter(Boolean).join(' ') || undefined;
+  const describedBy =
+    [ariaDescribedBy, toggleCharCounter ? `${id}--counter` : null, description ? `${id}--description` : null]
+      .filter(Boolean)
+      .join(' ') || undefined;
 
   const classes = classNames({
     'a-input': true,
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/radio/Radio.stories.jsx b/packages/antwerp-ui/react-components/src/lib/atoms/radio/Radio.stories.jsx
@@ -83,6 +83,15 @@ export default {
       description:
         'The `id` prop is required for the Radio component. It is also used to link the label with the HTML `input` tag.'
     },
+    required: {
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      description:
+        'The `required` prop adds a red asterisk to the `Radio` label and adds the required attribute to the HTML input field.'
+    },
     qa: QA_PROP_STORY
   }
 };
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/radio/Radio.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/radio/Radio.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
 import { RadioProps } from './Radio.types';
 
-export function Radio({ autoFocus, value, label, id, qa, name, onChange, checked, disabled }: RadioProps) {
+export function Radio({ autoFocus, value, label, id, qa, name, onChange, checked, disabled, required = false }: RadioProps) {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange && onChange(event);
   };
@@ -17,6 +17,7 @@ export function Radio({ autoFocus, value, label, id, qa, name, onChange, checked
         onChange={handleChange}
         disabled={disabled}
         autoFocus={autoFocus}
+        required={required}
       />
       <label htmlFor={id}>{label}</label>
     </div>
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/radio/Radio.types.ts b/packages/antwerp-ui/react-components/src/lib/atoms/radio/Radio.types.ts
@@ -10,6 +10,7 @@ export interface RadioProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   qa?: string;
   value: string;
+  required?: boolean;
 }
 
 export interface RadioGroupProps {
@@ -19,4 +20,7 @@ export interface RadioGroupProps {
   name: string;
   onChange?: (value: string) => void;
   qa?: string;
+  state?: 'success' | 'error';
+  description?: string;
+  required?: boolean;
 }
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/radio/RadioGroup.spec.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/radio/RadioGroup.spec.tsx
@@ -77,4 +77,37 @@ describe('UI Components - Atoms - RadioGroup', () => {
     fireEvent.click(getByLabelText('Raiden') as HTMLInputElement);
     expect(mockOnChange).toHaveBeenCalledTimes(1);
   });
-});
+
+  it('should add the correct input description', () => {
+    const { baseElement } = render(<RadioGroup {...defaultProps} description="descr" />);
+    expect(baseElement.getElementsByClassName('a-input__description')[0].textContent === 'descr').toBeTruthy();
+  });
+
+  it('should add the correct success state description', () => {
+    const { getByText } = render(<RadioGroup {...defaultProps} description="description" state="success" />);
+    const descriptionEl = getByText('description');
+    expect(descriptionEl).toHaveClass('is-success');
+  });
+
+  it('should add the correct error state description', () => {
+    const { getByText } = render(<RadioGroup {...defaultProps} description="description" state="error" />);
+    const descriptionEl = getByText('description');
+    expect(descriptionEl).toHaveClass('is-error');
+  });
+
+  it('adds a red asterisk to the label when the required prop is true', () => {
+    const { getByLabelText, container } = render(
+      <RadioGroup {...defaultProps} required>
+        <Radio value="Scorpion" label="Scorpion" id="first-option" />
+        <Radio value="Raiden" label="Raiden" id="second-option" />
+        <Radio value="Sub-Zero" label="Sub-Zero" id="third-option" />
+        <Radio value="None" label="None" id="fourth-option" />
+      </RadioGroup>
+    );
+    expect(container.querySelector('.u-text-danger')).toBeInTheDocument();
+    expect((getByLabelText(/Scorpion/) as HTMLInputElement).required).toBe(true);
+    expect((getByLabelText(/Raiden/) as HTMLInputElement).required).toBe(true);
+    expect((getByLabelText(/Sub-Zero/) as HTMLInputElement).required).toBe(true);
+    expect((getByLabelText(/None/) as HTMLInputElement).required).toBe(true);
+  });
+});
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/radio/RadioGroup.stories.jsx b/packages/antwerp-ui/react-components/src/lib/atoms/radio/RadioGroup.stories.jsx
@@ -19,6 +19,7 @@ export default {
   },
   args: {
     label: 'Choose your fighter',
+    description: 'Description',
     value: '',
     name: 'fighter-selection'
   },
@@ -31,6 +32,14 @@ export default {
       },
       description: 'An optional label for the `RadioGroup` component.'
     },
+    description: {
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' }
+      },
+      description: 'The `description` prop adds a description or hint text between the label and the `RadioGroup`.'
+    },
     value: {
       control: { type: 'text' },
       table: {
@@ -49,6 +58,15 @@ export default {
       description:
         'The `name` prop is used to group radio buttons together. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.'
     },
+    state: {
+      control: { type: 'select' },
+      options: ['', 'error', 'success'],
+      table: {
+        type: { summary: 'select' }
+      },
+      description:
+        'Whenever an input field is associated with a success or error state, the border of the container will match to that thematic colour as well as display the message above the container together with an identifiable icon.'
+    },
     onChange: {
       control: { type: 'function' },
       table: {
@@ -58,6 +76,15 @@ export default {
       description:
         'Function triggered when an option is selected. The first parameter of this function is the selected value as `string`.'
     },
+    required: {
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      description:
+        'The `required` prop adds a red asterisk to the `RadioGroup` label and adds the required attribute to the HTML radio group field.'
+    },
     qa: QA_PROP_STORY
   }
 };
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/radio/RadioGroup.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/radio/RadioGroup.tsx
@@ -1,8 +1,10 @@
 import { RadioGroupProps } from './Radio.types';
 import { ChangeEvent, cloneElement, Children, ReactElement } from 'react';
 import { classNames } from '../../../utils/dom.utils';
+import { renderDescription } from '../input/input.renders';
+import { renderRequiredAsterisk } from '../../../utils/render.utils';
 
-export function RadioGroup({ label, name, children = [], value, qa, onChange }: RadioGroupProps) {
+export function RadioGroup({ label, name, children = [], value, qa, onChange, description, state, required = false }: RadioGroupProps) {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     return onChange && onChange(event.target?.value);
   };
@@ -13,11 +15,13 @@ export function RadioGroup({ label, name, children = [], value, qa, onChange }:
 
   return (
     <fieldset className={classes} data-qa={qa}>
-      <legend className="a-input__label">{label}</legend>
+      <legend className="a-input__label">{label}{required && renderRequiredAsterisk()}</legend>
+      {renderDescription({ description, state })}
       {Children.map(children, (child: ReactElement) => {
         return cloneElement(child, {
           name: name,
           onChange: handleChange,
+          required: required,
           ...(value ? { checked: child.props.value === value } : {}),
           ...child.props
         });
diff --git a/packages/antwerp-ui/react-components/src/lib/atoms/select/Select.tsx b/packages/antwerp-ui/react-components/src/lib/atoms/select/Select.tsx
@@ -36,21 +36,23 @@ export function Select({
     'a-input__wrapper': true,
     'a-input__wrapper--inline': !!inline
   });
+
   return (
     <div className={classes} data-qa={qa}>
       {renderLabel({ label, id, required, inline })}
       {renderDescription({ id, description, state })}
       <div className={inputWrapperClasses}>
         <select
-          key={value}
           disabled={disabled}
           name={name}
           id={id}
           value={value}
-          defaultValue={(!value && placeholder) || undefined}
+          defaultValue={value || ''}
           onChange={handleChange}
         >
-          <option disabled>{placeholder}</option>
+          <option value="" disabled>
+            {placeholder}
+          </option>
           {(options || []).map((o, index) => {
             return (
               <option key={`${o.value}-${index}`} value={o.value} disabled={o.disabled}>
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/alert/Alert.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/alert/Alert.tsx
@@ -60,7 +60,7 @@ const renderInlineAlert = (className: string, props: AlertProps) => {
         </span>
       )}
       {!!props.title && (
-        <HeaderTag id={props.titleId} className="paragraph has-base-font">
+        <HeaderTag id={props.titleId} className="paragraph has-base-font u-margin-bottom-xs">
           {props.title?.label}
         </HeaderTag>
       )}
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.stories.jsx
@@ -124,6 +124,15 @@ export default {
       description:
         'When the `Autocomplete` is associated with a success or error state, the border of the inputfield as well as the description above will match to that thematic colour together with an identifiable icon.'
     },
+    disabled: {
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      description:
+        'When an input field is disabled, the container takes on a light grey fill, while the enclosed form inputs and add-ons are also rendered in lighter, muted greys without any interaction.'
+    },
     addOn: {
       control: { type: 'object' },
       table: {
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.tsx
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.types.ts b/packages/antwerp-ui/react-components/src/lib/molecules/autocomplete/Autocomplete.types.ts
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.stories.jsx
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/datepicker/Datepicker.tsx
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.spec.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.spec.tsx
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.stories.jsx
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.tsx
diff --git a/packages/antwerp-ui/react-components/src/utils/render.utils.tsx b/packages/antwerp-ui/react-components/src/utils/render.utils.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@a-ui/react",`
`3`		`- "version": "7.11.0",`
	`3`	`+ "version": "7.11.2",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"main": "./index.js",`
`6`	`6`	`"types": "./index.d.ts",`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,5 @@ export interface CheckboxProps {`
`10`	`10`	`onChange?: (event: ChangeEvent<HTMLInputElement>) => void;`
`11`	`11`	`qa?: string;`
`12`	`12`	`showLabel?: boolean;`
	`13`	`+ required?: boolean;`
`13`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@ interface InputProps {`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`export interface TextFieldProps extends InputProps {`
	`25`	`+ ariaDescribedBy?: string;`
`25`	`26`	`addOn?: {`
`26`	`27`	`type: 'icon' \| 'text' \| 'spinner';`
`27`	`28`	`size?: 'small' \| 'medium' \| 'large';`