v3.0.0

Major version released 🎉.

This release primarily includes accessibility improvements, extensibility enhancements, and convenience improvements.

Breaking Changes.

The closeOnOverlayClick option is no longer used.

Previously, to prevent clicking outside of a modal from closing it, the

useModal('root', {
  closeOnOverlayClick: false
})

but starting with this release, it has been changed to following.

useModal('root', {
  focusTrapOptions: {
    clickOutsideDeactivates: false,
  },
})

This is because focus-trap, a library used internally to solve problems around focus traps, is also responsible for non-modal clicks.
Therefore, to prevent a click outside of a modal from trapping the modal, specify focusTrapOptions.

A warning is now issued when there is no single focusable element in the modal.

WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.
As a workaround, if there is no focusable element in the modal, the focus is given to the containing element.
Reference: https://www.w3.org/TR/wai-aria-1.1/#dialog

Features

• A ModalProvider component has been implemented to share global settings. By #50 and #55 and #28
• The components option allows customization of the default modal elements. By #56
• Focus trapping is now automatic in the modal. by #46
  Sorry @dqn and @kuroppe1819.
  There were some considerations after merging the two PRs and we made the decision to use focus-trap.
• disable-scroll has been changed to body-scroll-lock. by #28 and #45

Fixes

• Fixed problem with modal close button not closing with space key. Related to #27
• Remove unnecessary z-index values.

What's Changed

• Improve accessibility by @dqn in #26
• Improve keyboard accessibility. by @kuroppe1819 in #31
• ESLintの設定に合わせて適切なパッケージをインストールする by @dc7290 in #42
• change scroll lock module by @yuki0410-dev in #28
• Bump nth-check from 2.0.0 to 2.0.1 by @dependabot in #30
• Bump follow-redirects from 1.14.1 to 1.14.8 by @dependabot in #35
• Bump nanoid from 3.1.25 to 3.3.4 by @dependabot in #43
• Bump terser from 4.8.0 to 4.8.1 by @dependabot in #41
• Bump eventsource from 1.1.0 to 1.1.1 by @dependabot in #40
• Bump async from 2.6.3 to 2.6.4 by @dependabot in #39
• Bump minimist from 1.2.5 to 1.2.6 by @dependabot in #38
• Bump url-parse from 1.5.3 to 1.5.10 by @dependabot in #37
• Adjust code style around scroll lock by @dc7290 in #45
• Bump node-forge and webpack-dev-server by @dependabot in #44
• Switch to focus-trap by @dc7290 in #46
• Add showCloseButton option. by @dc7290 in #47
• Allow global configuration with ModalConfig component by @dc7290 in #50
• v3.0.0 by @dc7290 in #51
• Delete unnecessary files by @dc7290 in #52
• Fixing paths in GitHub Pages by @dc7290 in #53
• The file structure of the examples page has been adjusted. by @dc7290 in #54
• ModalConfig→ModalProvider by @dc7290 in #55
• Feature components option by @dc7290 in #56

New Contributors

• @dqn made their first contribution in #26
• @dc7290 made their first contribution in #42
• @yuki0410-dev made their first contribution in #28

Full Changelog: v2.1.0...v3.0.0