GitHub - github/details-dialog-element: A modal dialog that's opened with . (original) (raw)
A modal dialog opened with a
button.
DEPRECATION WARNING
This web component has been deprecated. There are a number of accessibility concerns with this approach and so we no longer recommend using this component.
Accessibility and Usability Concerns
- Semantically, using a details-summary pattern for a dialog solution can be confusing for screen reader users.
- If the user performs a "find in page" operation on a website using details-dialog elements, the content on those elements will appear when they shouldn't.
- Opening the dialog does not disable scrolling on the underlying page.
GitHub are moving towards using a dialog Primer View Component which enforces certain aspects of the design (such as always having a close button and a title).
Installation
Available on npm as @github/details-dialog-element.
$ npm install --save @github/details-dialog-element
Usage
Script
Import as ES modules:
import '@github/details-dialog-element'
Include with a script tag: