Modal is a dynamically rendered element that floats about the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+
Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
-
Supported Content Types
-
These components and directives help to structure the content in your modal.
-
The DaffModalComponent optionally transcludes:
-
-
daff-modal-header: component that places the <daffModalTitle> with styles to
- handle the placement of an optional actionable icon.
-
daffModalTitle: directive for modal title that can be applied to a heading element
- (<h2>, <h3>, etc.)
-
daff-modal-content: scrollable component to place the primary content in modal.
-
daff-modal-actions: component to help place actionable components like buttons or links.
-
-
-
Usage
+
Basic Modal
+
+
Supported Content Types
+
A modal includes minimally pre-styled components and directives to help structure the content in your modal.
+
+
Header
+
Header can be added to a modal by using <daff-modal-header>. The header includes a title and an optional close button.
+
+
Title
+Title can be added to the header by using the daffModalTitle directive.
+
+
Close Button
+
The close button is shown by default but can be hidden by setting the dismissible property to false on the header.
+
+
Content
+
Content can be added to a modal by using <daff-modal-content>. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable.
+
+
Actions
+
Buttons can be added to a modal by using <daff-modal-actions>. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to end.
+
+
Dismissing a Modal
+
A modal can be dismissed via the close button or the ESC key. The close button is shown by default but can be hidden by setting the dismissible property to false on <daff-modal-header>. Additionally, the [daffModalClose] directive can be added to a <button> HTML element.
+
+
Accessibility
+
Modal works with the ARIA role="dialog" and aria-modal="true" attributes to provide an accessible experience. aria-labelledby is assigned the [daffModalTitle] string. When a modal is opened, the first tabbable element within it will receive focus.
+
+
Keyboard Interactions
+
A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the ESC key.
+
diff --git a/libs/design/modal/README.md b/libs/design/modal/README.md
index c64154423d..d56dc97c0d 100644
--- a/libs/design/modal/README.md
+++ b/libs/design/modal/README.md
@@ -1,47 +1,32 @@
-# Modal Component
+# Modal
+Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
-The `DaffModalComponent` is a dynamically rendered component that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+## Basic Modal
+
-## Usage
+## Supported Content Types
+A modal includes minimally pre-styled components and directives to help structure the content in your modal.
-`DaffModalComponent` relies on using the `entryComponents` of the particular Angular `@NgModule`. To use the features of the `DaffModalComponent`:
+### Header
+Header can be added to a modal by using ``. The header includes a title and an optional close button.
-* Import the `DaffModalModule` as you would with any other `@daffodil/design` component
-* Add the component that you want rendered inside the modal to your `@NgModule`'s `entryComponents`
+#### Title
+Title can be added to the header by using the `[daffModalTitle]` directive.
-```ts
-my.module.ts
+#### Close Button
+The close button in the header is shown by default but can be hidden by setting the `dismissible` property to `false` on the header.
-@NgModule({
- declarations: [
- MyModalContentComponent,
- ],
- imports: [
- DaffModalModule,
- ],
- entryComponents: [
- MyModalContentComponent
- ]
-})
-export class ModalModule {
-}
-```
+### Content
+Content can be added to a modal by using ``. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable.
-Once your `@NgModule` has been configured, you can take advantage of the `DaffModalService` that is provided by the `DaffModalModule` to `open` and `close` the instance of the `DaffModalComponent`.
+### Actions
+Buttons can be added to a modal by using ``. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to `end`.
-```ts
-my-other.component.ts
+## Dismissing a Modal
+A modal can be dismissed via the close button or the `ESC` key. The close button is shown by default but can be hidden by setting the `dismissible` property to `false` on ``. Additionally, the `[daffModalClose]` directive can be added to a `