Skip to content

Aksel@7.0.0
Compare
Choose a tag to compare
@KenAJoh KenAJoh released this 13 Sep 15:01
· 386 commits to main since this release
@navikt/aksel@7.0.0
d2424ec
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

What's new?

Version 7 comes with some small changes to ErrorSummary, Tooltip, Icons and our Tailwind config.

  • Will not affect most applications
  • All potential breaking changes and how to fix them can be found on our "Migration"-page

Checklist for update

  • Check that your Tooltip properly labels the element. It should be equally understandable to visual users and screen-readers even when the Tooltip is open or closed.
  • If your ErrorSummary did not have a heading before, check that the new default heading still works in your context.
  • If your ErrorSummary had a custom heading before, you can try removing it and just use the built in heading.
  • Check that you don't have BeaconSignals, Buldings2 and Buldings3 still in use.
  • If you use tailwind, check that use of sm: and max-w-screen-sm still visually works.

Tooltip

We found the use of Tooltip often leading to some degraded experiences for non mouse and visual users.

Some of the main causes to this were:

  • Tooltip content were only available when visible (open)
  • Dynamic content in Tooltip were often not caught by screen-readers since it depended on Tooltip being open or closed
  • Wrong use of Tooltip around non-interactive elements made it non accessible to keyboard users.

To solve this, we updated Tooltip to instead of using aria-describedby, now use aria-label on the elements it surrounds.

// React
<Tooltip content="Åpne inbox">
  <Button icon={<InboxIcon />}/>
</Tooltip>

// Output
<button aria-label="Åpne inbox">
  ...
</button>

As a consequence of this, the content inside the wrapper ("button" in this case) will be ignored by screen-readers. In the case one still wants the visible text to be accessible, you can add the describesChild-prop. This replaces the aria-label with title to make the Tooltip content an additional label.

ErrorSummary

We did some analysis on how ErrorSummary were used and noticed that most of the headings were mostly similar, and with only small differences in most cases. To solve this, ErrorSummary now comes with a default heading when no heading is provided.

Icons

Around 6 months ago, a few icons were renamed and re-labeled. Since we only found ~20 instances of these still in production we decided that v7 would be an ok release to remove the old duplicates.

  • BeaconSignals -> OpenSource
  • Buldings2 -> Buildings2
  • Buldings3 -> Buildings3

Tailwind

We now include our own breakpoints in the screens config. This allows users of our tailwind-config and Primitives to work under the same breakpoints. Our config mostly mirrors the native tailwind-config, but sm and 2xl will be different.

// Native Tailwind config
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',

// New config
'sm': '480px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1440px',
Assets 2
Loading