@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

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);
   }
 }
 
@@ -69,13 +54,17 @@
   --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
+  --pf-c-toolbar__item--AlignSelf: auto;
   --pf-c-toolbar__group--Display: flex;
+  --pf-c-toolbar__group--AlignItems: baseline;
+  --pf-c-toolbar__group--AlignSelf: auto;
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-toolbar__content--Display: flex;
   --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-toolbar__content-section--Display: flex;
+  --pf-c-toolbar__content-section--AlignItems: baseline;
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
   --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-toolbar__expandable-content--Display: grid;
@@ -197,9 +186,22 @@
 .pf-c-toolbar__group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
-  align-items: center;
+  align-items: var(--pf-c-toolbar__group--AlignItems);
+  align-self: var(--pf-c-toolbar__group--AlignSelf);
   margin-right: var(--pf-c-toolbar--spacer);
 }
+.pf-c-toolbar__group.pf-m-align-items-center {
+  align-items: center;
+}
+.pf-c-toolbar__group.pf-m-align-items-baseline {
+  align-items: baseline;
+}
+.pf-c-toolbar__group.pf-m-align-self-center {
+  align-self: center;
+}
+.pf-c-toolbar__group.pf-m-align-self-baseline {
+  align-self: baseline;
+}
 .pf-c-toolbar__group.pf-m-button-group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
 }
@@ -227,11 +229,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;
@@ -242,6 +242,7 @@
   --pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
   --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
+  align-self: var(--pf-c-toolbar__item--AlignSelf);
   width: var(--pf-c-toolbar__item--Width--base);
   min-width: var(--pf-c-toolbar__item--MinWidth--base);
   margin-right: var(--pf-c-toolbar--spacer);
@@ -296,6 +297,12 @@
     --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
   }
 }
+.pf-c-toolbar__item.pf-m-align-self-center {
+  align-self: center;
+}
+.pf-c-toolbar__item.pf-m-align-self-baseline {
+  align-self: baseline;
+}
 .pf-c-toolbar__item.pf-m-overflow-menu {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
 }
@@ -340,20 +347,24 @@
 .pf-c-toolbar__content,
 .pf-c-toolbar__content-section {
   flex-wrap: wrap;
-  align-items: center;
 }
 
 .pf-c-toolbar__content {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
   position: relative;
+  align-items: center;
   padding-right: var(--pf-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
 }
 
 .pf-c-toolbar__content-section {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
+  align-items: var(--pf-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
+.pf-c-toolbar__content-section.pf-m-align-items-center {
+  align-items: center;
+}
 
 .pf-c-toolbar__expandable-content {
   position: absolute;
@@ -364,7 +375,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 +387,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 +447,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 +460,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 +473,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 +486,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 +499,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 +512,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

@@ -13,9 +13,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   // Item
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
+  --pf-c-toolbar__item--AlignSelf: auto;
 
   // Group
   --pf-c-toolbar__group--Display: flex;
+  --pf-c-toolbar__group--AlignItems: baseline;
+  --pf-c-toolbar__group--AlignSelf: auto;
 
   // Sticky
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -28,6 +31,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
   // Content section
   --pf-c-toolbar__content-section--Display: flex;
+  --pf-c-toolbar__content-section--AlignItems: baseline;
 
   // Insets
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -208,9 +212,26 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 
   @include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
 
-  align-items: center;
+  align-items: var(--pf-c-toolbar__group--AlignItems);
+  align-self: var(--pf-c-toolbar__group--AlignSelf);
   margin-right: var(--pf-c-toolbar--spacer);
 
+  &.pf-m-align-items-center {
+    align-items: center;
+  }
+
+  &.pf-m-align-items-baseline {
+    align-items: baseline;
+  }
+
+  &.pf-m-align-self-center {
+    align-self: center;
+  }
+
+  &.pf-m-align-self-baseline {
+    align-self: baseline;
+  }
+
   // Button group
   &.pf-m-button-group {
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
@@ -249,12 +270,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;
     }
   }
 
@@ -272,10 +291,19 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   @include pf-build-css-variable-stack("--pf-c-toolbar__item--MinWidth--base", "--pf-c-toolbar__item--MinWidth", $pf-c-toolbar--breakpoint-map);
   @include pf-hidden-visible(var(--pf-c-toolbar__item--Display));
 
+  align-self: var(--pf-c-toolbar__item--AlignSelf);
   width: var(--pf-c-toolbar__item--Width--base);
   min-width: var(--pf-c-toolbar__item--MinWidth--base);
   margin-right: var(--pf-c-toolbar--spacer);
 
+  &.pf-m-align-self-center {
+    align-self: center;
+  }
+
+  &.pf-m-align-self-baseline {
+    align-self: baseline;
+  }
+
   // Overflow menu
   &.pf-m-overflow-menu {
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
@@ -331,7 +359,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 }
 
-
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -341,7 +368,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 .pf-c-toolbar__content,
 .pf-c-toolbar__content-section {
   flex-wrap: wrap;
-  align-items: center;
 }
 
 // Content
@@ -349,6 +375,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   @include pf-hidden-visible(var(--pf-c-toolbar__content--Display));
 
   position: relative;
+  align-items: center;
   padding-right: var(--pf-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
 }
@@ -357,7 +384,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 .pf-c-toolbar__content-section {
   @include pf-hidden-visible(var(--pf-c-toolbar__content-section--Display));
 
+  align-items: var(--pf-c-toolbar__content-section--AlignItems);
   width: 100%;
+
+  &.pf-m-align-items-center {
+    align-items: center;
+  }
 }
 
 // Expandable content
@@ -370,7 +402,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 +413,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 +485,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/Tooltip/themes/dark/tooltip.scss

@@ -2,17 +2,14 @@
 
 @mixin pf-theme-dark-tooltip() {
   .pf-c-tooltip {
-    --pf-c-tooltip--BoxShadow: none;
     --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  }
-
-  .pf-c-tooltip,
-  .pf-c-tooltip__arrow {
-    border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
+    --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
   }
 
   .pf-c-tooltip__arrow {
     --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
     --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
+
+    box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
   }
 }

package/components/Tooltip/tooltip.css

@@ -83,14 +83,11 @@
 }
 
 :where(.pf-theme-dark) .pf-c-tooltip {
-  --pf-c-tooltip--BoxShadow: none;
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-}
-:where(.pf-theme-dark) .pf-c-tooltip,
-:where(.pf-theme-dark) .pf-c-tooltip__arrow {
-  border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
+  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
 }
 :where(.pf-theme-dark) .pf-c-tooltip__arrow {
   --pf-c-tooltip__arrow--Width: 0.9375rem;
   --pf-c-tooltip__arrow--Height: 0.9375rem;
+  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
 }

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