@surfnet/curve-react@0.9.0

Minor Changes

• 0bf44ec: Add DatePickerInput: a text input with a calendar button, for picking a date in a form. Type a date or pick one from the calendar (Arrow Down opens it). Unlike the button-based DatePicker, the label points at a real <input>, so screen readers hear the label as the name and the chosen date as the value, and aria-invalid / aria-describedby work as on any other field. id is required so a <FieldLabel htmlFor> can always be linked. When the typed text isn't a valid date, the input sets aria-invalid="true" by itself (checked when the user leaves the field or presses Enter), so it is announced and styled as invalid.

Patch Changes

• e4832bf: Checkbox: fix disabled styling

@surfnet/curve-angular@0.9.0

Patch Changes

• b8e57c0: Stop hlmInput, hlmTextarea and hlmRadioGroup from dropping consumer ARIA attributes:

  • aria-describedby is now merged with the ids from hlmField instead of being overwritten.
  • aria-invalid is now accepted as an override of the form control's invalid state (as Spartan's combobox does). Without it, the control state still drives the attribute.

  hlm-date-picker-input now forwards aria-label, aria-labelledby, aria-describedby and aria-invalid to its inner <input>.

@surfnet/curve-react@0.8.2

No changes in this release.

@surfnet/curve-react@0.8.1

Patch Changes

• f277442: Alert: links in a list inside an alert description (such as an error summary) now have a target at least 24px high, meeting WCAG 2.2 target size (2.5.8).
• f277442: FieldError (React) and hlm-field-error (Angular) no longer have role="alert". With several invalid fields, each error interrupted the screen reader at once. Show an error summary above the form and move focus to it after a failed submit instead — see "Formulieren bouwen" in the Curve docs. In React, link each error to its control with aria-describedby; in Angular hlmField already does this.
• 12b0c23: Fix InputGroupInput / InputGroupTextarea showing their own border, radius and focus ring inside an InputGroup when the bundler emits the input stylesheet after the input-group one. The control overrides are now scoped under .group so they no longer depend on CSS order.
• 45bf39e: Placeholder text now uses the --placeholder token instead of --muted-foreground: Combobox, Date Picker, Input, Input Group, Select and Textarea. The base ::placeholder style in the package CSS uses --placeholder too, so plain <input> and <textarea> elements match the components.
• f277442: Fix the Tooltip arrow position: it is pinned to the edge facing the trigger again on every side, matching Angular.

@surfnet/curve-angular@0.8.2

No changes in this release.

@surfnet/curve-angular@0.8.1

Patch Changes

• f277442: Alert: links in a list inside an alert description (such as an error summary) now have a target at least 24px high, meeting WCAG 2.2 target size (2.5.8).
• f277442: FieldError (React) and hlm-field-error (Angular) no longer have role="alert". With several invalid fields, each error interrupted the screen reader at once. Show an error summary above the form and move focus to it after a failed submit instead — see "Formulieren bouwen" in the Curve docs. In React, link each error to its control with aria-describedby; in Angular hlmField already does this.
• 45bf39e: Placeholder text now uses the --placeholder token instead of --muted-foreground: Combobox, Date Picker, Input, Input Group, Select and Textarea. The base ::placeholder style in the package CSS uses --placeholder too, so plain <input> and <textarea> elements match the components.

@surfnet/curve-react@0.8.0

Minor Changes

• f2e4e42: Form fields now show a --border-strong border on hover: Combobox (chips), Input, Input Group, Input OTP, Select and Textarea. Focus, active and invalid states still take precedence, and disabled fields don't react to hover.
• 4cca4c0: FieldLabel now becomes a selectable "choice card" when it wraps a Field (bordered, with a primary tint when the control inside is checked), matching @surfnet/curve-angular. Horizontal Fields with FieldContent now top-align their checkbox or radio. See the new RadioGroup ChoiceCard story.

Patch Changes

• 4cca4c0: Field / hlmField no longer renders role="group". A single field isn't a group, and inside a choice-card label the role caused the radio or checkbox to lose its accessible name (axe "Form elements must have labels"). To group related fields, use FieldSet / fieldset[hlmFieldSet].
• f5c43ed: Split focus styling: :focus now gives the primary (--ring) border, and :focus-visible adds the 3px ring shadow on top. Mouse-focused controls show the border change only; keyboard focus shows both. Applies to accordion, badge, button, checkbox, input, item, native select, radio group, select, switch, tabs, textarea and toggle.

@surfnet/curve-angular@0.8.0

Minor Changes

• f2e4e42: Form fields now show a --border-strong border on hover: Combobox (chips), Input, Input Group, Input OTP, Select and Textarea. Focus, active and invalid states still take precedence, and disabled fields don't react to hover.

Patch Changes

• 4cca4c0: Field / hlmField no longer renders role="group". A single field isn't a group, and inside a choice-card label the role caused the radio or checkbox to lose its accessible name (axe "Form elements must have labels"). To group related fields, use FieldSet / fieldset[hlmFieldSet].
• f5c43ed: Split focus styling: :focus now gives the primary (--ring) border, and :focus-visible adds the 3px ring shadow on top. Mouse-focused controls show the border change only; keyboard focus shows both. Applies to accordion, badge, button, checkbox, input, item, native select, radio group, select, switch, tabs, textarea and toggle.

@surfnet/curve-react@0.7.0

Minor Changes

• 7592bdc: Added a new skip-link component to improve accessibility. The link is visually hidden until it receives keyboard focus, then lets users skip past headers and navigation menus directly to the page's main content. This helps keyboard and assistive technology users and supports WCAG 2.4.1 (Bypass Blocks).

@surfnet/curve-angular@0.7.0

Minor Changes

• 7592bdc: Added a new skip-link component to improve accessibility. The link is visually hidden until it receives keyboard focus, then lets users skip past headers and navigation menus directly to the page's main content. This helps keyboard and assistive technology users and supports WCAG 2.4.1 (Bypass Blocks).