Skip to content

AgDS Beta v1.25.0 release

Compare
Choose a tag to compare
@stowball stowball released this 09 Dec 03:53
· 150 commits to develop since this release
73ef00c

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.