From e8e159f2f0e98a9827187e07abf1491a18f51dcb Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Thu, 3 Nov 2022 20:26:57 -0400
Subject: [PATCH 1/5] refactor(about-modal): moved to modal-box

---
 .../AboutModalBox/about-modal-box.hbs         |  2 -
 .../AboutModalBox/about-modal-box.scss        | 30 ------
 .../AboutModalBox/examples/AboutModalBox.md   | 12 +--
 .../demos/AboutModal/about-modal-template.hbs | 92 +++++++++----------
 4 files changed, 48 insertions(+), 88 deletions(-)

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 @@
 <div class="pf-c-about-modal-box{{#if about-modal-box--modifier}} {{about-modal-box--modifier}}{{/if}}"
-  role="dialog" 
-  aria-modal="true"
   {{#if about-modal-box--attribute}}
     {{{about-modal-box--attribute}}}
   {{/if}}>
diff --git a/src/patternfly/components/AboutModalBox/about-modal-box.scss b/src/patternfly/components/AboutModalBox/about-modal-box.scss
index a6aa072cf9..15e74a97cd 100644
--- a/src/patternfly/components/AboutModalBox/about-modal-box.scss
+++ b/src/patternfly/components/AboutModalBox/about-modal-box.scss
@@ -2,31 +2,9 @@
   // 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--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,15 +97,12 @@
   @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:
     "brand close"
     "header header"
     "content content";
-  width: var(--pf-c-about-modal-box--Width);
-  height: var(--pf-c-about-modal-box--Height);
   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
@@ -142,13 +117,8 @@
   }
 
   @media only screen and (min-width: $pf-global--breakpoint--lg) {
-    --pf-c-about-modal-box--Height: var(--pf-c-about-modal-box--lg--Height);
-    --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
-
     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..941eba4f51 100644
--- a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
+++ b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
@@ -6,11 +6,10 @@ cssPrefix: pf-c-about-modal-box
 
 ## Examples
 ### Basic
-```hbs isFullscreen
-{{#> about-modal-box about-modal-box--attribute='aria-labelledby="about-modal-title"'}}
+```hbs
+{{#> 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,11 +38,6 @@ 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** |
 
diff --git a/src/patternfly/demos/AboutModal/about-modal-template.hbs b/src/patternfly/demos/AboutModal/about-modal-template.hbs
index f627e34101..23946c5f5a 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"'}}
-            <i class="fas fa-times" aria-hidden="true"></i>
-          {{/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}}
-          <dl>
-            <dt>CFME version</dt>
-            <dd>5.5.3.4.20102789036450</dd>
-            <dt>Cloudforms version</dt>
-            <dd>4.1</dd>
-            <dt>Server name</dt>
-            <dd>40DemoMaster</dd>
-            <dt>User name</dt>
-            <dd>Administrator</dd>
-            <dt>User role</dt>
-            <dd>EvmRole-super_administrator</dd>
-            <dt>Browser version</dt>
-            <dd>601.2</dd>
-            <dt>Browser OS</dt>
-            <dd>Mac</dd>
-          </dl>
-          {{/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--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"'}}
+          <i class="fas fa-times" aria-hidden="true"></i>
+        {{/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}}
+        <dl>
+          <dt>CFME version</dt>
+          <dd>5.5.3.4.20102789036450</dd>
+          <dt>Cloudforms version</dt>
+          <dd>4.1</dd>
+          <dt>Server name</dt>
+          <dd>40DemoMaster</dd>
+          <dt>User name</dt>
+          <dd>Administrator</dd>
+          <dt>User role</dt>
+          <dd>EvmRole-super_administrator</dd>
+          <dt>Browser version</dt>
+          <dd>601.2</dd>
+          <dt>Browser OS</dt>
+          <dd>Mac</dd>
+        </dl>
+        {{/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}}

From c7db4892d8094ccb7a12d0d272a05c84d2d57b9c Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Tue, 8 Nov 2022 14:33:34 -0500
Subject: [PATCH 2/5] refactor(about-modal): updated width/height

---
 .../components/AboutModalBox/about-modal-box.scss   | 13 +++++++++++--
 .../AboutModalBox/examples/AboutModalBox.md         |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/patternfly/components/AboutModalBox/about-modal-box.scss b/src/patternfly/components/AboutModalBox/about-modal-box.scss
index 15e74a97cd..723e23c093 100644
--- a/src/patternfly/components/AboutModalBox/about-modal-box.scss
+++ b/src/patternfly/components/AboutModalBox/about-modal-box.scss
@@ -1,7 +1,10 @@
 .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--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--Width: 100%;
+  --pf-c-about-modal-box--MaxWidth: #{pf-size-prem(1232px)};
   --pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
   --pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;
 
@@ -103,10 +106,12 @@
     "brand close"
     "header header"
     "content content";
+  width: var(--pf-c-about-modal-box--Width);
+  max-width: var(--pf-c-about-modal-box--MaxWidth);
+  height: var(--pf-c-about-modal-box--Height);
   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);
@@ -117,8 +122,12 @@
   }
 
   @media only screen and (min-width: $pf-global--breakpoint--lg) {
+    --pf-c-about-modal-box--Height: var(--pf-c-about-modal-box--lg--Height);
+    --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
+
     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);
   }
 }
 
diff --git a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
index 941eba4f51..ce29a6992f 100644
--- a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
+++ b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
@@ -6,7 +6,7 @@ cssPrefix: pf-c-about-modal-box
 
 ## Examples
 ### Basic
-```hbs
+```hbs isFullscreen
 {{#> 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"'}}

From 9150789f278e94423712d11494e9cc4201d57194 Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Wed, 9 Nov 2022 14:30:17 -0500
Subject: [PATCH 3/5] refactor(about-modal): removed max-width

---
 src/patternfly/components/AboutModalBox/about-modal-box.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/patternfly/components/AboutModalBox/about-modal-box.scss b/src/patternfly/components/AboutModalBox/about-modal-box.scss
index 723e23c093..67caeb0be4 100644
--- a/src/patternfly/components/AboutModalBox/about-modal-box.scss
+++ b/src/patternfly/components/AboutModalBox/about-modal-box.scss
@@ -4,7 +4,6 @@
   --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--Width: 100%;
-  --pf-c-about-modal-box--MaxWidth: #{pf-size-prem(1232px)};
   --pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
   --pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;
 
@@ -107,7 +106,6 @@
     "header header"
     "content content";
   width: var(--pf-c-about-modal-box--Width);
-  max-width: var(--pf-c-about-modal-box--MaxWidth);
   height: var(--pf-c-about-modal-box--Height);
   overflow-x: hidden;
   overflow-y: auto;
@@ -127,7 +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);
   }
 }
 

From e16eef923462bdcb17c9852668d5ee45e1821478 Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Wed, 9 Nov 2022 20:23:32 -0500
Subject: [PATCH 4/5] refactor(about-modal): removed aria-labelledby

---
 src/patternfly/demos/AboutModal/about-modal-template.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/patternfly/demos/AboutModal/about-modal-template.hbs b/src/patternfly/demos/AboutModal/about-modal-template.hbs
index 23946c5f5a..c34923c473 100644
--- a/src/patternfly/demos/AboutModal/about-modal-template.hbs
+++ b/src/patternfly/demos/AboutModal/about-modal-template.hbs
@@ -1,6 +1,6 @@
 {{#> modal-template}}
   {{#> modal-box modal-box--modifier="pf-m-lg" modal-box--attribute='aria-labelledby="about-modal-title"'}}
-    {{#> 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}}

From 55cb5d69708bf0018dfc6a0dd469295ee59f425d Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Wed, 9 Nov 2022 21:04:47 -0500
Subject: [PATCH 5/5] refactor(about-modal): removed aria-label

---
 .../components/AboutModalBox/examples/AboutModalBox.md           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
index ce29a6992f..c7eea3a50c 100644
--- a/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
+++ b/src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
@@ -39,7 +39,6 @@ cssPrefix: pf-c-about-modal-box
 | Attribute | Applies to | Outcome |
 | -- | -- | -- |
 | `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 |