v5.3.x patch 1 (#6595)

* fix(release): updated code to release patch to npmjs

* fix(TreeView): improved a11y experience (#6480)

* fix(TreeView): improved a11y experience

* Updated aria-label to match React PR

* Updated tabindices

* Reverted changes affecting tabindices

* fix(pagination): fixed display for per page menu toggle (#6586)

* fix(pagination): fixed display for per page menu toggle

* chore(pagination): s/pagination-options-menupagination-menu-toggle

* chore(pagination): remove top expanded, add toggle aria-label

* Update pagination-menu-toggle.hbs

remove aria-label

---------

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

release.config.js

@@ -3,7 +3,7 @@ module.exports = {
     'do-not-delete',
     { name: 'v4', channel: 'prerelease-v4', range: '4.x' },
     { name: 'main', channel: 'prerelease', prerelease: 'prerelease' },
-    { name: '5.3.x', channel: 'prerelease-bugfix', range: '5.3.x'}
+    { name: '5.3.x', channel: 'prerelease-bugfix', range: '5.3.x' }
   ],
   analyzeCommits: {
     preset: 'angular'
@@ -24,5 +24,5 @@ module.exports = {
     ['@semantic-release/npm', { pkgRoot: 'dist' }]
   ],
   tagFormat: 'patch-v${version}',
-  dryRun: true
+  dryRun: false
 };

src/patternfly/components/Pagination/examples/Pagination.md

@@ -4,32 +4,21 @@ section: components
 cssPrefix: pf-v5-c-pagination
 ---
 
-import './Pagination.css'
-
 ## Examples
 ### Top
 ```hbs
 {{#> pagination}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-top-example"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-top-example"}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - top example"}}
 {{/pagination}}
 ```
 
-### Top expanded
-```hbs
-{{#> pagination}}
-  {{> pagination-total-items-content}}
-  {{> pagination-options-menu options-menu--IsExpanded="true" pagination-options-menu--id="pagination-options-menu-top-expanded-example"}}
-  {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - top expanded example"}}
-{{/pagination}}
-```
-
 ### Top sticky
 ```hbs
 {{#> pagination pagination--modifier="pf-m-sticky"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-top-sticky-example"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-top-sticky-example"}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - top sticky example"}}
 {{/pagination}}
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
@@ -45,15 +34,15 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--IsIndeterminate="true"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-top-indeterminate-example"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-top-indeterminate-example"}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - indeterminate item count example"}}
 {{/pagination}}
 ```
 
 ### Bottom
 ```hbs
 {{#> pagination pagination--modifier="pf-m-bottom"}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-bottom-example" pagination-options-menu--modifier="pf-m-top"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-bottom-example" pagination-menu-toggle--modifier="pf-m-top"}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - bottom example"}}
 {{/pagination}}
 ```
@@ -68,7 +57,7 @@ import './Pagination.css'
 <br><br>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
 {{#> pagination pagination--modifier="pf-m-bottom pf-m-sticky"}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-bottom-sticky-example" pagination-options-menu--modifier="pf-m-top"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-bottom-sticky-example" pagination-menu-toggle--modifier="pf-m-top"}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - bottom sticky example"}}
 {{/pagination}}
 ```
@@ -77,7 +66,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-top-disabled-example" options-menu-toggle--IsDisabled="true"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-top-disabled-example" menu-toggle--IsDisabled="true"}}
   {{> pagination-nav-content pagination-nav-content--IsDisabled="true"  pagination-nav--aria-label="Pagination nav - top disabled example"}}
 {{/pagination}}
 ```
@@ -86,7 +75,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--IsCompact="true"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id="pagination-options-menu-compact-example"}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id="pagination-menu-toggle-compact-example"}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - compact example"}}
 {{/pagination}}
 ```
@@ -95,7 +84,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--id="pagination-top-with-summary-modifier" pagination--modifier="pf-m-display-summary"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id=(concat pagination--id '-options-menu')}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id=(concat pagination--id '-menu-toggle')}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - top with display summary modifier example"}}
 {{/pagination}}
 ```
@@ -104,7 +93,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--id="pagination-top-with-full-modifier" pagination--modifier="pf-m-display-full"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id=(concat pagination--id '-options-menu')}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id=(concat pagination--id '-menu-toggle')}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - top with display full modifier example"}}
 {{/pagination}}
 ```
@@ -113,7 +102,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--id="pagination-top-with-responsive-summary-navigation-modifiers" pagination--modifier="pf-m-display-summary pf-m-display-full-on-lg pf-m-display-summary-on-xl pf-m-display-full-on-2xl"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id=(concat pagination--id '-options-menu')}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id=(concat pagination--id '-menu-toggle')}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - top with responsive display summary and display full modifiers example"}}
 {{/pagination}}
 ```
@@ -122,7 +111,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--id="pagination-compact-with-full-modifier" pagination--IsCompact="true" pagination--modifier="pf-m-display-full"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id=(concat pagination--id '-options-menu')}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id=(concat pagination--id '-menu-toggle')}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - compact display full modifier example"}}
 {{/pagination}}
 ```
@@ -131,7 +120,7 @@ import './Pagination.css'
 ```hbs
 {{#> pagination pagination--id="pagination-inset" pagination--modifier="pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"}}
   {{> pagination-total-items-content}}
-  {{> pagination-options-menu pagination-options-menu--id=(concat pagination--id '-options-menu')}}
+  {{> pagination-menu-toggle pagination-menu-toggle--id=(concat pagination--id '-menu-toggle')}}
   {{> pagination-nav-content pagination-nav--aria-label="Pagination nav - inset example"}}
 {{/pagination}}
 ```

src/patternfly/components/Pagination/pagination-menu-toggle.hbs

@@ -0,0 +1,11 @@
+{{#> menu-toggle
+  menu-toggle--IsPlain=true
+  menu-toggle--IsText=true
+  menu-toggle--modifier=pagination-menu-toggle--modifier menu-toggle--id=pagination-menu-toggle--id}}
+  {{#> menu-toggle-text}}
+    <b>1 - 10</b>&nbsp;of&nbsp;<b>{{#if pagination--IsIndeterminate}}many{{else}}36{{/if}}</b>
+  {{/menu-toggle-text}}
+  {{#> menu-toggle-controls}}
+    {{> menu-toggle-toggle-icon}}
+  {{/menu-toggle-controls}}
+{{/menu-toggle}}

src/patternfly/components/Pagination/pagination.scss

@@ -17,9 +17,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-bottom--child--md--MarginRight: var(--#{$pf-global}--spacer--lg);
   --#{$pagination}--m-compact--child--MarginRight: var(--#{$pf-global}--spacer--sm);
 
-  // dropdown
-  --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
-
   // nav
   --#{$pagination}__nav--Display: none;
   --#{$pagination}--m-display-summary__nav--Display: none;
@@ -75,10 +72,14 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-bottom--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
 
-  // options menu
+  // per page menu
+  --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$pagination}--c-menu-toggle--Display--base: inline-flex;
   --#{$pagination}--c-menu-toggle--Display: none;
+  --#{$pagination}--c-menu-toggle--md--Display: var(--#{$pagination}--c-menu-toggle--Display--base);
   --#{$pagination}--m-display-summary--c-menu-toggle--Display: none;
-  --#{$pagination}--m-display-full--c-menu-toggle--Display: inline-flex;
+  --#{$pagination}--m-display-full--c-menu-toggle--Display: var(--#{$pagination}--c-menu-toggle--Display--base);
+  --#{$pagination}--m-bottom--c-menu-toggle--Display: var(--#{$pagination}--c-menu-toggle--Display--base);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--md) {
     --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop);
@@ -88,7 +89,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     --#{$pagination}--m-bottom--child--MarginRight: var(--#{$pagination}--m-bottom--child--md--MarginRight);
     --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --#{$pagination}--m-bottom--BoxShadow: none;
-    --#{$pagination}--c-menu-toggle--Display: inline-flex;
+    --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--c-menu-toggle--md--Display);
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
   }
@@ -135,7 +136,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     }
 
     position: sticky;
-   inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
+    inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
     justify-content: center;
     background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
@@ -156,7 +157,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
     .#{$menu-toggle} {
       position: absolute;
-      display: block;
+      display: var(--#{$pagination}--m-bottom--c-menu-toggle--Display);
     }
 
     .#{$pagination}__nav {

src/patternfly/components/Toolbar/toolbar-item-pagination.hbs

@@ -4,7 +4,7 @@
       37 items
     {{/pagination-total-items}}
 
-    {{> pagination-options-menu pagination-options-menu--id=(concat toolbar--id '-pagination-options-menu') }}
+    {{> pagination-menu-toggle pagination-menu-toggle--id=(concat toolbar--id '-pagination-menu-toggle') }}
 
     {{#> pagination-nav}}
       {{#> pagination-nav-control pagination-nav-control--modifier="pf-m-first"}}