Skip to content

Commit

Permalink
Restore some of the documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
KittyGiraudel committed Feb 28, 2021
1 parent b17078f commit 1df9a4b
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 0 deletions.
15 changes: 15 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -394,6 +394,21 @@ To do so:

For more information about modals, refer to the [WAI ARIA recommendations](https://www.w3.org/TR/wai-aria-1.1/#alertdialog).

### Using the dialog HTML element

The native HTML `<dialog>` element is notoriously inconsistent, and poorly implemented across browsers. As of version 7 of a11y-dialog, its integration with the library is discontinued to simplify it.

Amongst other, here are the issues with the HTML `<dialog>` element:

- Clicking the backdrop does not close the dialog on Chrome.
- The native `::backdrop` only shows when programatically opening the dialog, not when using the `open` attribute.
- Default styles are left to the browsers’ discretion and can be inconsistent.
- The [modal pattern](#usage-as-a-modal) (`role="alertdialog"`) simply does not work with the dialog element.
- It still requires JavaScript anyway, so it’s not even 100% HTML.
- [Read more about the shortcoming of the dialog element by Scott O'hara](https://www.scottohara.me/blog/2019/03/05/open-dialog.html).

If you really want to use the `<dialog>` HTML element nevertheless, you can use the latest 6.y.z version of a11y-dialog. Its documentation can be found in the README.md of that release.

### Nested dialogs

Nesting dialogs is a [questionable design pattern](https://ux.stackexchange.com/questions/52042/is-it-acceptable-to-open-a-modal-popup-on-top-of-another-modal-popup) that is not referenced anywhere in the [HTML 5.2 Dialog specification](https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element). Therefore it is actively discouraged in favour of clearer interface design.
Expand Down
1 change: 1 addition & 0 deletions SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
- [Animations](README.md#animations)
- [Prevent window scroll](README.md#prevent-window-scroll)
- [Usage as a modal](README.md#usage-as-a-modal)
- [Using the dialog HTML element](README.md#using-the-dialog-html-element)
- [Nested dialogs](README.md#nested-dialogs)

- [Further reading](README.md#further-reading)
Expand Down

0 comments on commit 1df9a4b

Please sign in to comment.