diff --git a/src/patternfly/components/AboutModalBox/about-modal-box.hbs b/src/patternfly/components/AboutModalBox/about-modal-box.hbs
index 6d9dc386df..494b84431a 100644
--- a/src/patternfly/components/AboutModalBox/about-modal-box.hbs
+++ b/src/patternfly/components/AboutModalBox/about-modal-box.hbs
@@ -1,6 +1,4 @@
diff --git a/src/patternfly/components/AboutModalBox/about-modal-box.scss b/src/patternfly/components/AboutModalBox/about-modal-box.scss
index a6aa072cf9..67caeb0be4 100644
--- a/src/patternfly/components/AboutModalBox/about-modal-box.scss
+++ b/src/patternfly/components/AboutModalBox/about-modal-box.scss
@@ -1,32 +1,12 @@
.pf-c-about-modal-box {
// Component variables
--pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000); // Modal uses a non-standard background color
- --pf-c-about-modal-box--BoxShadow: 0 0 100px 0 rgba(255, 255, 255, .05); // This is a special one-off glow for the about modal
- --pf-c-about-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
--pf-c-about-modal-box--Height: 100%;
--pf-c-about-modal-box--lg--Height: #{pf-size-prem(762px)}; // Height is optimized for the exact height desired
- --pf-c-about-modal-box--lg--MaxHeight: calc(100% - var(--pf-global--spacer--xl)); // MaxHeight ensures that the modal will not go off the screen and instead the content will scroll
- --pf-c-about-modal-box--Width: 100vw;
- --pf-c-about-modal-box--lg--Width: calc(100% - (var(--pf-global--spacer--3xl) * 2)); // Modal should be full width with a gutter on either side until it hits a max-width
- --pf-c-about-modal-box--lg--MaxWidth: #{pf-size-prem(1232px)};
- --pf-c-about-modal-box--PaddingTop: var(--pf-global--spacer--xl);
- --pf-c-about-modal-box--PaddingRight: var(--pf-global--spacer--xl);
- --pf-c-about-modal-box--PaddingBottom: var(--pf-global--spacer--xl);
- --pf-c-about-modal-box--PaddingLeft: var(--pf-global--spacer--xl);
- --pf-c-about-modal-box--sm--PaddingTop: var(--pf-global--spacer--3xl);
- --pf-c-about-modal-box--sm--PaddingRight: var(--pf-global--spacer--3xl);
- --pf-c-about-modal-box--sm--PaddingBottom: var(--pf-global--spacer--3xl);
- --pf-c-about-modal-box--sm--PaddingLeft: var(--pf-global--spacer--3xl);
+ --pf-c-about-modal-box--Width: 100%;
--pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
--pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;
- @media screen and (min-width: $pf-global--breakpoint--sm) {
- --pf-c-about-modal-box--PaddingTop: var(--pf-c-about-modal-box--sm--PaddingTop);
- --pf-c-about-modal-box--PaddingRight: var(--pf-c-about-modal-box--sm--PaddingRight);
- --pf-c-about-modal-box--PaddingBottom: var(--pf-c-about-modal-box--sm--PaddingBottom);
- --pf-c-about-modal-box--PaddingLeft: var(--pf-c-about-modal-box--sm--PaddingLeft);
- }
-
// Brand
--pf-c-about-modal-box__brand--PaddingTop: var(--pf-global--spacer--2xl);
--pf-c-about-modal-box__brand--PaddingRight: var(--pf-global--spacer--xl);
@@ -119,7 +99,6 @@
@include pf-t-dark;
position: relative;
- z-index: var(--pf-c-about-modal-box--ZIndex);
display: grid;
grid-template-rows: max-content max-content auto;
grid-template-areas:
@@ -131,7 +110,6 @@
overflow-x: hidden;
overflow-y: auto;
background-color: var(--pf-c-about-modal-box--BackgroundColor); // Because this component is always dark, set the background color
- box-shadow: var(--pf-c-about-modal-box--BoxShadow);
@media only screen and (min-width: $pf-global--breakpoint--sm) {
grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
@@ -147,8 +125,6 @@
grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
grid-template-rows: max-content max-content auto;
- max-width: var(--pf-c-about-modal-box--lg--MaxWidth);
- max-height: var(--pf-c-about-modal-box--lg--MaxHeight);
}
}
diff --git a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
index 7123348b4a..c7eea3a50c 100644
--- a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
+++ b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
@@ -7,10 +7,9 @@ cssPrefix: pf-c-about-modal-box
## Examples
### Basic
```hbs isFullscreen
-{{#> about-modal-box about-modal-box--attribute='aria-labelledby="about-modal-title"'}}
+{{#> about-modal-box}}
{{#> about-modal-box-brand}}
- {{#> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
- {{/about-modal-box-brand-image}}
+ {{> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
{{/about-modal-box-brand}}
{{#> about-modal-box-close}}
{{#> button button--attribute='aria-label="Close dialog"' button--modifier="pf-m-plain"}}
@@ -39,13 +38,7 @@ cssPrefix: pf-c-about-modal-box
### Accessibility
| Attribute | Applies to | Outcome |
| -- | -- | -- |
-| `role="dialog"` | `.pf-c-about-modal-box` | Identifies the element that serves as the modal container. **Required** |
-| `aria-labelledby="[id value of element describing modal]"` | `.pf-c-about-modal-box` | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when adequate titling element is present** |
-| `aria-label="[title of modal]"` | `.pf-c-about-modal-box` | Gives the modal an accessible name. **Required when adequate titling element is _not_ present** |
-| `aria-describedby="[id value of applicable content]"` | `.pf-c-about-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
-| `aria-modal="true"` | `.pf-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required** |
| `aria-label="Close Dialog"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
-| `aria-hidden="true"` | Parent element containing the page contents when the modal is open. | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
### Usage
| Class | Applied to | Outcome |
diff --git a/src/patternfly/demos/AboutModal/about-modal-template.hbs b/src/patternfly/demos/AboutModal/about-modal-template.hbs
index f627e34101..c34923c473 100644
--- a/src/patternfly/demos/AboutModal/about-modal-template.hbs
+++ b/src/patternfly/demos/AboutModal/about-modal-template.hbs
@@ -1,47 +1,45 @@
-{{#> about-modal}}
- {{#> backdrop}}
- {{#> bullseye}}
- {{#> about-modal-box about-modal-box--attribute='aria-labelledby="about-modal-title"'}}
- {{#> about-modal-box-brand}}
- {{#> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
- {{/about-modal-box-brand-image}}
- {{/about-modal-box-brand}}
- {{#> about-modal-box-close}}
- {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close dialog"'}}
-
- {{/button}}
- {{/about-modal-box-close}}
- {{#> about-modal-box-header}}
- {{#> title titleType="h1" title--modifier="pf-m-4xl" title--attribute='id="about-modal-title"'}}
- Red Hat OpenShift Container Platform
- {{/title}}
- {{/about-modal-box-header}}
- {{#> about-modal-box-hero}}
- {{/about-modal-box-hero}}
- {{#> about-modal-box-content}}
- {{#> content}}
-
- - CFME version
- - 5.5.3.4.20102789036450
- - Cloudforms version
- - 4.1
- - Server name
- - 40DemoMaster
- - User name
- - Administrator
- - User role
- - EvmRole-super_administrator
- - Browser version
- - 601.2
- - Browser OS
- - Mac
-
- {{/content}}
- {{#> about-modal-box-strapline}}
- Trademark and copyright information here
- {{/about-modal-box-strapline}}
- {{/about-modal-box-content}}
- {{/about-modal-box}}
- {{/bullseye}}
- {{/backdrop}}
-{{/about-modal}}
+{{#> modal-template}}
+ {{#> modal-box modal-box--modifier="pf-m-lg" modal-box--attribute='aria-labelledby="about-modal-title"'}}
+ {{#> about-modal-box}}
+ {{#> about-modal-box-brand}}
+ {{#> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
+ {{/about-modal-box-brand-image}}
+ {{/about-modal-box-brand}}
+ {{#> about-modal-box-close}}
+ {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close dialog"'}}
+
+ {{/button}}
+ {{/about-modal-box-close}}
+ {{#> about-modal-box-header}}
+ {{#> title titleType="h1" title--modifier="pf-m-4xl" title--attribute='id="about-modal-title"'}}
+ Red Hat OpenShift Container Platform
+ {{/title}}
+ {{/about-modal-box-header}}
+ {{#> about-modal-box-hero}}
+ {{/about-modal-box-hero}}
+ {{#> about-modal-box-content}}
+ {{#> content}}
+
+ - CFME version
+ - 5.5.3.4.20102789036450
+ - Cloudforms version
+ - 4.1
+ - Server name
+ - 40DemoMaster
+ - User name
+ - Administrator
+ - User role
+ - EvmRole-super_administrator
+ - Browser version
+ - 601.2
+ - Browser OS
+ - Mac
+
+ {{/content}}
+ {{#> about-modal-box-strapline}}
+ Trademark and copyright information here
+ {{/about-modal-box-strapline}}
+ {{/about-modal-box-content}}
+ {{/about-modal-box}}
+ {{/modal-box}}
+{{/modal-template}}