@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

package/components/Toolbar/toolbar.css

@@ -1,64 +1,49 @@
 .pf-c-toolbar__content-section, .pf-c-toolbar__content, .pf-c-toolbar__item, .pf-c-toolbar__group {
-  --pf-hidden-visible--visible--Visibility: visible;
   --pf-hidden-visible--hidden--Display: none;
-  --pf-hidden-visible--hidden--Visibility: hidden;
   --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-  --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   display: var(--pf-hidden-visible--Display);
-  visibility: var(--pf-hidden-visible--Visibility);
 }
 .pf-m-hidden.pf-c-toolbar__content-section, .pf-m-hidden.pf-c-toolbar__content, .pf-m-hidden.pf-c-toolbar__item, .pf-m-hidden.pf-c-toolbar__group {
   --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-  --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
 }
 @media screen and (min-width: 576px) {
   .pf-m-hidden-on-sm.pf-c-toolbar__content-section, .pf-m-hidden-on-sm.pf-c-toolbar__content, .pf-m-hidden-on-sm.pf-c-toolbar__item, .pf-m-hidden-on-sm.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-m-visible-on-sm.pf-c-toolbar__content-section, .pf-m-visible-on-sm.pf-c-toolbar__content, .pf-m-visible-on-sm.pf-c-toolbar__item, .pf-m-visible-on-sm.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-m-hidden-on-md.pf-c-toolbar__content-section, .pf-m-hidden-on-md.pf-c-toolbar__content, .pf-m-hidden-on-md.pf-c-toolbar__item, .pf-m-hidden-on-md.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-m-visible-on-md.pf-c-toolbar__content-section, .pf-m-visible-on-md.pf-c-toolbar__content, .pf-m-visible-on-md.pf-c-toolbar__item, .pf-m-visible-on-md.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-m-hidden-on-lg.pf-c-toolbar__content-section, .pf-m-hidden-on-lg.pf-c-toolbar__content, .pf-m-hidden-on-lg.pf-c-toolbar__item, .pf-m-hidden-on-lg.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-m-visible-on-lg.pf-c-toolbar__content-section, .pf-m-visible-on-lg.pf-c-toolbar__content, .pf-m-visible-on-lg.pf-c-toolbar__item, .pf-m-visible-on-lg.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-m-hidden-on-xl.pf-c-toolbar__content-section, .pf-m-hidden-on-xl.pf-c-toolbar__content, .pf-m-hidden-on-xl.pf-c-toolbar__item, .pf-m-hidden-on-xl.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-m-visible-on-xl.pf-c-toolbar__content-section, .pf-m-visible-on-xl.pf-c-toolbar__content, .pf-m-visible-on-xl.pf-c-toolbar__item, .pf-m-visible-on-xl.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-m-hidden-on-2xl.pf-c-toolbar__content-section, .pf-m-hidden-on-2xl.pf-c-toolbar__content, .pf-m-hidden-on-2xl.pf-c-toolbar__item, .pf-m-hidden-on-2xl.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-m-visible-on-2xl.pf-c-toolbar__content-section, .pf-m-visible-on-2xl.pf-c-toolbar__content, .pf-m-visible-on-2xl.pf-c-toolbar__item, .pf-m-visible-on-2xl.pf-c-toolbar__group {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 
@@ -227,11 +212,9 @@
 .pf-c-toolbar__group.pf-m-toggle-group .pf-c-toolbar__group,
 .pf-c-toolbar__group.pf-m-toggle-group .pf-c-toolbar__item {
   display: none;
-  visibility: hidden;
 }
 .pf-c-toolbar__group.pf-m-toggle-group .pf-c-toolbar__toggle {
   display: inline-block;
-  visibility: visible;
 }
 .pf-c-toolbar__group:last-child {
   --pf-c-toolbar--spacer: 0;
@@ -364,7 +347,6 @@
   display: none;
   width: 100%;
   padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
-  visibility: hidden;
   background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
 }
@@ -377,7 +359,6 @@
 .pf-c-toolbar__expandable-content.pf-m-expanded {
   display: grid;
   grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
-  visibility: visible;
 }
 .pf-c-toolbar__expandable-content .pf-c-toolbar__group,
 .pf-c-toolbar__expandable-content .pf-c-toolbar__item {
@@ -438,11 +419,9 @@
 .pf-m-toggle-group.pf-m-show .pf-c-toolbar__item {
   display: flex;
   flex: 0 1 auto;
-  visibility: visible;
 }
 .pf-m-toggle-group.pf-m-show .pf-c-toolbar__toggle {
   display: none;
-  visibility: hidden;
 }
 
 @media (min-width: 576px) {
@@ -453,11 +432,9 @@
 .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
-    visibility: visible;
   }
   .pf-m-toggle-group.pf-m-show-on-sm .pf-c-toolbar__toggle {
     display: none;
-    visibility: hidden;
   }
 }
 @media (min-width: 768px) {
@@ -468,11 +445,9 @@
 .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
-    visibility: visible;
   }
   .pf-m-toggle-group.pf-m-show-on-md .pf-c-toolbar__toggle {
     display: none;
-    visibility: hidden;
   }
 }
 @media (min-width: 992px) {
@@ -483,11 +458,9 @@
 .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
-    visibility: visible;
   }
   .pf-m-toggle-group.pf-m-show-on-lg .pf-c-toolbar__toggle {
     display: none;
-    visibility: hidden;
   }
 }
 @media (min-width: 1200px) {
@@ -498,11 +471,9 @@
 .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
-    visibility: visible;
   }
   .pf-m-toggle-group.pf-m-show-on-xl .pf-c-toolbar__toggle {
     display: none;
-    visibility: hidden;
   }
 }
 @media (min-width: 1450px) {
@@ -513,11 +484,9 @@
 .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__item {
     display: flex;
     flex: 0 1 auto;
-    visibility: visible;
   }
   .pf-m-toggle-group.pf-m-show-on-2xl .pf-c-toolbar__toggle {
     display: none;
-    visibility: hidden;
   }
 }
 .pf-c-toolbar .pf-c-toolbar__item.pf-m-align-right,

package/components/Toolbar/toolbar.scss

@@ -249,12 +249,10 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
     .pf-c-toolbar__group,
     .pf-c-toolbar__item {
       display: none;
-      visibility: hidden;
     }
 
     .pf-c-toolbar__toggle {
       display: inline-block;
-      visibility: visible;
     }
   }
 
@@ -370,7 +368,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   display: none;
   width: 100%;
   padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
-  visibility: hidden;
   background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
 
@@ -382,7 +379,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   &.pf-m-expanded {
     display: grid;
     grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
-    visibility: visible;
   }
 
   .pf-c-toolbar__group,
@@ -455,12 +451,10 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
       .pf-c-toolbar__item {
         display: flex;
         flex: 0 1 auto;
-        visibility: visible;
       }
 
       .pf-c-toolbar__toggle {
         display: none;
-        visibility: hidden;
       }
     }
   }

package/components/Wizard/wizard.css

@@ -216,7 +216,6 @@
 .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
 .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
   display: none;
-  visibility: hidden;
 }
 
 .pf-c-wizard__header {
@@ -242,12 +241,10 @@
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
   color: var(--pf-c-wizard__description--Color);
-  visibility: hidden;
 }
 @media screen and (min-width: 992px) {
   .pf-c-wizard__description {
     display: block;
-    visibility: visible;
   }
 }
 
@@ -265,7 +262,6 @@
 @media screen and (min-width: 992px) {
   .pf-c-wizard__toggle {
     display: none;
-    visibility: hidden;
   }
 }
 .pf-c-wizard__toggle.pf-m-expanded {
@@ -345,19 +341,16 @@
   max-height: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  visibility: hidden;
   background-color: var(--pf-c-wizard__nav--BackgroundColor);
   box-shadow: var(--pf-c-wizard__nav--BoxShadow);
 }
 .pf-c-wizard__nav.pf-m-expanded {
   display: block;
-  visibility: visible;
 }
 @media screen and (min-width: 992px) {
   .pf-c-wizard__nav {
     display: block;
     height: 100%;
-    visibility: visible;
     border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
   }
 }
@@ -390,11 +383,9 @@
 }
 .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
   display: none;
-  visibility: hidden;
 }
 .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
   display: block;
-  visibility: visible;
 }
 .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
   --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);

package/components/Wizard/wizard.scss

@@ -223,7 +223,6 @@
     .pf-c-wizard__footer,
     .pf-c-wizard__toggle {
       display: none;
-      visibility: hidden;
     }
   }
 }
@@ -254,11 +253,9 @@
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
   color: var(--pf-c-wizard__description--Color);
-  visibility: hidden;
 
   @media screen and (min-width: $pf-global--breakpoint--lg) {
     display: block;
-    visibility: visible;
   }
 }
 
@@ -275,7 +272,6 @@
 
   @media screen and (min-width: $pf-global--breakpoint--lg) {
     display: none;
-    visibility: hidden;
   }
 
   &.pf-m-expanded {
@@ -357,19 +353,16 @@
   max-height: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  visibility: hidden;
   background-color: var(--pf-c-wizard__nav--BackgroundColor);
   box-shadow: var(--pf-c-wizard__nav--BoxShadow);
 
   &.pf-m-expanded {
     display: block;
-    visibility: visible;
   }
 
   @media screen and (min-width: $pf-global--breakpoint--lg) {
     display: block;
     height: 100%;
-    visibility: visible;
     border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
   }
 }
@@ -413,14 +406,12 @@
 
     > .pf-c-wizard__nav-list {
       display: none;
-      visibility: hidden;
     }
   }
 
   &.pf-m-expanded {
     > .pf-c-wizard__nav-list {
       display: block;
-      visibility: visible;
     }
 
     > .pf-c-wizard__nav-link {

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -7,12 +7,7 @@ cssPrefix: pf-c-about-modal-box
 ### Basic
 
 ```html isFullscreen
-<div
-  class="pf-c-about-modal-box"
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="about-modal-title"
->
+<div class="pf-c-about-modal-box">
   <div class="pf-c-about-modal-box__brand">
     <img
       class="pf-c-about-modal-box__brand-image"
@@ -47,15 +42,9 @@ 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** |
+| 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** |
 
 ### Usage