braid-design-system@24.0.0

Major Changes

• Add customisable MenuRenderer component (#514)

  BREAKING CHANGES

  • Rename OverflowMenuItem to MenuItem.
  • Removed type="link" from OverflowMenuItem due to an accessibility issue with the approach (based on review of consumer usage, it did not seem to be used).

  FEATURES

  MenuRenderer

  Encapsulates all the behaviours of an accessible menu button, allowing consumers to define a custom trigger to open the menu. The trigger function receives two arguments:

  1. Props required for accessibility, including mouse/keyboard interactions
  2. Menu state object containing the open state.

  <MenuRenderer
    trigger={(triggerProps, { open }) => (
      <button {...triggerProps}>Menu</button>
    )}
  >
    <MenuItem onClick={...}>Option</MenuItem>
  </MenuRenderer>

  MIGRATION GUIDE

  OverflowMenuItem

  Rename OverflowMenuItem to MenuItem.

   <OverflowMenu label="Overflow">
  -  <OverflowMenuItem onClick={...}>Option</OverflowMenuItem>
  +  <MenuItem onClick={...}>Option</MenuItem>
   </OverflowMenu>

  Changing the type is no longer supported due to an accessibility issue with the previous implementation. Please get in contact via Slack if you depended on this.

   <OverflowMenu label="Overflow">
  -  <OverflowMenuItem type="link" onClick={...}>Option</OverflowMenuItem>
  +  <MenuItem onClick={...}>Option</MenuItem>
   </OverflowMenu>

Minor Changes

• Add BraidTestProvider component. (#529)

  This is an alternative to BraidProvider for unit test environments. Note that, as the name implies, this should not be used in production code.

  MIGRATION GUIDE

  In your unit tests, you can replace usage of BraidProvider with BraidTestProvider, omitting the theme.

  -<BraidProvider theme={wireframe}>
  +<BraidTestProvider>

  If for whatever reason your tests are relying on the presence of a specific theme, you can pass the name of the desired theme.

  -<BraidProvider theme={seekAnz}>
  +<BraidTestProvider themeName="seekAnz">

• Only show focus rings on buttons for keyboard navigation. (#526)

  This impacts the following components:

  • Button
  • ButtonRenderer
  • OverflowMenu

  Browsers automatically show focus rings on buttons when clicking on them, even though (for our purposes, at least) they're undesirable from a visual design perspective and redudant from a UX perspective.

  We now automatically hide these focus rings if the user has moved their mouse, indicating that they're not navigating via the keyboard. However, to maintain keyboard accessibility, we reinstate these focus rings whenever the keyboard is used. Most typically, this ensures that you'll see focus rings when tabbing around the UI, even if you've previously used the mouse.

  MIGRATION GUIDE

  No public APIs are affected by this, but you may find that this causes unit test failues that look like this:

  Warning: An update to X inside a test was not wrapped in act(...).

  If this is the case, you should replace BraidProvider in your tests with BraidTestProvider.

  -<BraidProvider theme={wireframe}>
  +<BraidTestProvider>