AgDS Beta v1.25.0 release

Updates

App layout

• Ensure focus ring is not cut off by the screen edge and sibling links.
• Add aria attributes to mobile menu button to improve state announcement.
• AppLayoutHeader: Wrap accountDetails when space is limited.
• docs: Explain in more detail the reasons for choosing each sub-level items option.

Autocomplete

• Announce loading and error states to screen readers.
• docs: Improve ‘Do’ and ‘Don’t’ guidance.
• docs: Improve Invalid guidance and example.

Avatar

• Add colour section to docs, showcasing dark and light palette variants.

Box

• Improve performance by separating style props and memoising.

Breadcrumbs

• Update accessible name for collapsible (…) button to be more descriptive.
• docs: Improve guidance around correct usage of breadcrumbs.

Button

• Improve appearance and experience for high contrast users.

Callout

• docs: Add title section with link to semantic headings.
• docs: Change conditionally revealed guidance to within-accordion, rather than within-radio. Add Colour section to indicate palette options.

Card

• docs: Add ‘Do’ item relating to wrapping cards in a list.
• docs: Include colour section, and ensure lists are marked up semantically.

Checkbox

• Add explicit for/id association between input and label to improve accessibility.
• Change focus ring to use :focus instead of :focus-visible.
• Improve appearance and experience for high contrast users.

Combobox

• Improve performance of option rendering, filtering and string matching.
• Announce loading and error states to screen readers.
• Prevent iOS ‘Done’ button from closing dropdown.
• Fix announcement of options iOS VoiceOver.
• Fix accessing options in Android TalkBack.
• Simplify required now its Field allows undefined.
• ComboboxMulti: Enable iOS screen reader users to delete individual selections.
• ComboboxMulti: Correctly announce selection and removal of items.
• ComboboxMulti: Prevent users from being able to focus the chip to remove it - removal only available from the (x) button.
• docs: Improve Invalid guidance and example.

Date picker

• Update calendar to satisfy ARIA pattern.
• Make hover, selected and today cells visible in high contrast mode.
• Internally support and transform ISO date strings when set as value.
• Disable autocomplete on calendar navigation dropdown.
• Simplify required now its Field allows undefined.

Date range picker

• Update calendar to satisfy ARIA pattern.
• Make hover, selected and today cells visible in high contrast mode.
• Add stable ids to the from and to inputs.
• Disable autocomplete on calendar navigation dropdown.
• Internally support and transform ISO date strings when set as value.
• docs: Update example error messages to be specific to the invalid inputs.
• docs: Fix toInvalid checks and inputChange events in examples.

Details

• Fix iOS VoiceOver not announcing the expanded state.
• Make the (i) icon announced to screen readers.
• docs: Improve ‘Do’ and Don’t guidance.

Drawer

• Improve appearance and experience for high contrast users.

Dropdown menu

• docs: Update badge examples to announce text similar to as it appears visually.

Feature link list

• Initial release of component.

Field

• Allow required to be undefined.
• Update useScrollToField hook to also find elements by name.

File input

• Change to hybrid, custom implementation for consistent visual and screen reader announcement.
• Simplify required now its Field allows undefined.
• docs: Add accept example and enhance hint guidance.

File upload

• Announce adding and removing files.
• Announce file size, accepted files, invalid message and optional state when focusing Select file(s) button.
• Add focus ring to Select file(s) button.
• Add buttonRef prop and attach it to Select file(s) button.
• Simplify required now its Field allows undefined.

Global alert

• Improve appearance and experience for high contrast users.

Header

• Add aria attributes to mobile menu button to improve state announcement.

Icon

• Create LicenceBusinessIcon, LicenceIcon, LockIcon, PermitIcon, UnlockIcon, UsersIcon, WalletIcon and XIcon.
• Add id as allowed prop.
• docs: Improve usage guidance.

Link list

• docs: Improve ‘Do’ and Don’t guidance.

Main nav

• Set aria-expanded to match mobile menu open state.
• Wrap secondaryItems when space is limited.

Modal

• Fix appearance on small screens.
• Improve appearance and experience for high contrast users.

Notification badge

• Improve appearance and experience for high contrast users.

Page alert

• Make title default to H2 instead of H3.
• Update focusOnUpdate to not focus on any falsey value.
• docs: Improve customising the title guidance.

Pagination

• Announce itemRangeText to screen readers.
• Announce the hidden pages represented by ellipses.
• Ensure focus is returned to the correct page number button when the Previous button is added and removed.
• docs: Update Items per page to a working example.

Password input

• docs: Improve ‘Do’ and Don’t guidance.

Progress indicator

• Improve appearance and experience for high contrast users.
• Only set active step when path matches exactly or has a sub-step.

Prose

• Apply bodyText maxWidth token to lists.

Radio

• Add explicit for/id association between input and label to improve accessibility.
• Change focus ring to use :focus instead of :focus-visible.
• Improve appearance and experience for high contrast users.

Search input

• Simplify required now its Field allows undefined.
• docs: Improve guidance/examples to include a search landmark.

Section alert

• Add role and aria-label to improve announcements across screen readers.
• Update focusOnUpdate to not focus on any falsey value.

Select

• Simplify required now its Field allows undefined.
• Add TypeScript support for autocomplete.

Side nav

• Use responsive column widths to contain example.
• docs: Improve Don’t guidance.

Sub nav

• Improve appearance and experience for high contrast users.

Summary list

• Prevent action column from shrinking.
• docs: Update examples to have unique Action content.

Switch

• Add required aria-checked attribute and add support for aria-controls.

Table

• Correctly label table wrappers when headings are used instead of captions.
• Fix scrolling shadows not responding to changes in table heights.
• TableCell: Add support for id prop.
• docs: Update guidance and examples of sortable tables to match ARIA pattern.
• docs/storybook: Change indeterminate select-all checkbox to always select all items rather than deselect when some are selected.
• docs: Fix alignment of cells.
• docs: Improve ‘Do’ guidance.

Tabs

• Improve appearance and experience for high contrast users.

Tags

• Automatically focus previous tag onRemove.
• Add ref support.
• Set background to 'body'.

Text input

• Simplify required now its Field allows undefined.

Textarea

• Simplify required now its Field allows undefined.

Time input

• Correctly handle ‘am’ and ‘pm’ when separated from times with a space.
• Simplify required now its Field allows undefined.

Time picker

• Announce loading and error states to screen readers.

Other docs

• content: Make uncontrolled checkboxes & radio buttons function.
• content-principles: Improve accessibility of link to footnote.
• content-structure: Add section regarding semantic headings and page structure.
• content-styles: Add abbreviations, acronymns and initialisms content.
• content-styles: Update example headings to be unique.
• foundations: Improve icon usage clarity.
• general: Add a unique aria-label to live code editors.
• general: Remove tab stop from static code snippets.
• general: Remove aria-labels from live code snippet buttons so the visible label become the accessible name.
• general: Export visuallyHiddenStyles for use within live code examples.
• general: Set dynamic branch for edit-this-page link so that editors can primarily be sent to develop.
• patterns: Add announcement of empty states.
• patterns: Fix heading hierarchy in Search filters page.
• patterns: Improve Focus mode ‘Do’ and Don’t guidance.
• tokens: List dark and light colour tokens separately and describe the colour as words.

yourgov

• Updated release of complex example application to showcase various patterns.

Released packages

"@ag.ds-next/react": "1.25.0"

Full changelog

Aside from the complete release notes on the @ag.ds-next website, you can also view the verbose change log in the related PR for this release.