Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

inclusive-elements

tobyzerner148MIT0.4.6TypeScript support: included

Accessible, lightweight, unstyled implementations of common UI controls.

readme

Inclusive Elements

Accessible, lightweight, unstyled implementations of common UI controls.

Demo

Basic interactive UI patterns like popup menus, tooltips, and modals are surprisingly hard to get right on the web. Component libraries tend to be weighty, opinionated, and come tightly coupled with styles you don't want. On the other hand, rolling your own components feels like you're reinventing the wheel and puts accessibility at risk.

inclusive-elements provides those basic behaviors in the form of Custom Elements, without any of the cruft. They are:

  • 🦮 Accessible. Designed following the ARIA Authoring Practices Guide so everyone can use them.
  • 🌳 Lightweight. Tree-shake only the elements you need.
  • 🎨 Unstyled. Easily integrate with your design bottom-up without having to fight defaults.
  • 🚀 Easy to use. Simple API, works with any framework that supports Custom Elements.

Installation

npm install inclusive-elements --save

Elements

Detailed descriptions and usage instructions are contained within each element:

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

changelog

Changelog

0.4.5 (2023-06-29)

Bug Fixes

  • tooltip: clean up tooltip positioner on disconnect (a163ad7)

0.4.4 (2023-06-25)

Bug Fixes

  • alerts: fix regression causing alerts not to show (da0b283)

0.4.3 (2023-06-25)

Bug Fixes

  • alerts: fix previous alert with same key not being dismissed (356e028)
  • update hello-goodbye to fix transitions not running reliably (89f23df)

0.4.2 (2023-06-11)

Features

  • tooltip: auto-update position on scroll, resize, etc (587de3b)

Bug Fixes

  • tooltip: only update tooltip content if original element content has changed (62ad220)

0.4.1 (2023-04-15)

Bug Fixes

  • attempt to fix tree shaking (ac1f1b1)

0.4.0 (2023-04-15)

⚠ BREAKING CHANGES

  • disclosure: open and close events have been removed - use toggle instead

Features

  • disclosure: add toggle event for consistency with <details> (9fc7f74)
  • tabs: new tabs element (4097e73)

0.3.4 (2023-03-21)

Bug Fixes

  • disclosure: fix issue with widget not closing in some cases (cb3ae5d)

0.3.3 (2023-03-17)

Bug Fixes

  • popup: fix layout flicker when opening popup (42a397b)

0.3.2 (2023-03-17)

Bug Fixes

  • tooltip: prevent tooltip flicker on touch scroll (2e461de)

0.3.1 (2023-03-17)

Bug Fixes

  • tooltip: show tooltip on touch (d421649)

0.3.0 (2023-03-16)

Features

  • add Disclosure and Accordion elements (0df80d3)

Bug Fixes

  • modal: prevent scroll on focus trap (de)activation (4e09d5f)
  • popup: allow popup trigger button to be nested (6c62efd)

0.2.2 - 2023-03-05

Added

  • Alerts: Handle pre-existing children and any subsequently added to the container. Options can be specified as [data-*] attributes.
  • Popup: Allow popups to be disabled using the [disabled] attribute.
  • Popup: Don't open popup if modifier keys are pressed. This allows link popup triggers to be opened in a new tab.

Fixed

  • Popup: Clean up event listeners when popup element is disconnected.

0.2.1 - 2022-08-05

Fixed

  • Fix package not including dist files.

0.2.0 - 2022-08-05

Changed

  • Upgrade to @floating-ui/dom 1.0.0.
  • Switch build tool from Rollup to Vite.

0.1.3 - 2022-06-05

Added

  • Popup: Update popup position on resize.

Fixed

  • Alerts: Dismiss all alerts by key, not just the first one.
  • Modal: Fix some focus issues.
  • Popup: Fix max size not being applied.
  • Tooltip: Clear timeout on disconnect.

0.1.2 - 2022-03-03

Fixed

  • Popup: Fix calculated max size overriding CSS max-size declaration, even if it's larger.

0.1.1 - 2022-02-22

Fixed

  • Popup: Fix popup content not having a max size applied.

0.1.0 - 2022-01-28

Fixed

  • Menu: Ensure that Arrow keys only navigate to items that are focusable.
  • Modal: Fix focus not being placed correctly when modal is open on creation.

0.1.0-beta.9 - 2022-01-27

Added

  • New element: Toolbar.
  • Support for tree-shaking so unused elements won't be included in the bundle.
  • Use prefers-reduced-motion media queries for transition CSS examples.
  • Alerts: New clear method to dismiss all alerts.
  • Popup: Additional discussion and demonstration of use-cases.
  • Tooltip: Support for hovering over tooltip contents (opt-out with pointer-events: none).

Changed

  • External dependencies are no longer included in the bundle, meaning a bundler is required for use.
  • Modal: Use focus-trap instead of inert so that modals do not have to be placed as a direct child of the <body>.
  • Popup, Tooltip: Use Floating UI instead of Placement.js for element positioning.

Fixed

  • Set various ARIA attributes less aggressively (ie. only if they haven't already been set).
  • Alerts: Export the AlertOptions type definition.
  • Menu: Attach event listeners to menu element rather than document.
  • Popup: Only add aria-haspopup="true" if the content has the menu role.
  • Popup: Close the popup if the user tabs away from it.
  • Tooltip: Hide the tooltip when the page is scrolled.

0.1.0-beta.8 - 2021-09-12

Added

  • Tooltip: Hide tooltip when Escape key is pressed. (3bcdfcc8)

Removed

  • Tooltip: Remove support for touch devices. (7e1c0e69)

Fixed

  • Tooltip: Fix parent event listeners not being removed properly on disconnect. (a75b6997)

0.1.0-beta.7 - 2021-05-27

Fixed

  • Tooltip: Only remove event listeners on disconnection if parent still exists.

0.1.0-beta.6 - 2021-05-20

Changed

  • Alerts: Increase default alert duration to 10 seconds.

Fixed

  • Tooltip: Fix behavior on touch devices.
  • Update Placement.js to fix incorrect positions when horizontally scrolled.

0.1.0-beta.5 - 2021-05-18

Changed

  • Update hello-goodbye version.

0.1.0-beta.4 - 2021-05-09

Changed

  • Popup: Don't close when a menuitemcheckbox is clicked.
  • Popup: Only return focus to button when Escape key is used to close popup.

Fixed

  • Tooltip: Hide tooltip on click, or if parent becomes disabled.
  • Implemented disconnect callbacks to properly clean up element side effects.

Removed

  • Popup: Don't set z-index - leave this to the userspace.

0.1.0-beta.3 - 2021-03-05

Fixed

  • Recompile dist file.

0.1.0-beta.2 - 2021-03-05

Fixed

  • Update hello-goodbye version.
  • Mark package as side-effect free.