@patternfly/patternfly 4.203.4 → 4.204.2

package/docs/components/Popover/examples/Popover.md

@@ -8,9 +8,10 @@ cssPrefix: pf-c-popover
 
 ### Top
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -33,9 +34,10 @@ cssPrefix: pf-c-popover
 
 ### Right
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-right-header"
   aria-describedby="popover-right-body"
@@ -58,9 +60,10 @@ cssPrefix: pf-c-popover
 
 ### Bottom
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-bottom"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-header"
   aria-describedby="popover-bottom-body"
@@ -83,9 +86,10 @@ cssPrefix: pf-c-popover
 
 ### Left
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-left-header"
   aria-describedby="popover-left-body"
@@ -106,11 +110,12 @@ cssPrefix: pf-c-popover
 
 ```
 
-### Left with top and bottom positions
+### Left top
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-left-start-header"
   aria-describedby="popover-left-start-body"
@@ -128,9 +133,15 @@ cssPrefix: pf-c-popover
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
 </div>
-<br />
+
+```
+
+### Left bottom
+
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left-bottom"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-left-end-header"
   aria-describedby="popover-left-end-body"
@@ -151,11 +162,12 @@ cssPrefix: pf-c-popover
 
 ```
 
-### Bottom with left and right positions
+### Bottom left
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-bottom-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-start-header"
   aria-describedby="popover-bottom-start-body"
@@ -176,9 +188,15 @@ cssPrefix: pf-c-popover
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
 </div>
-<br />
+
+```
+
+### Bottom right
+
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-bottom-right"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-end-header"
   aria-describedby="popover-bottom-end-body"
@@ -201,9 +219,10 @@ cssPrefix: pf-c-popover
 
 ### Without header/footer
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right"
+  role="dialog"
   aria-modal="true"
   aria-label="Popover with no header example"
   aria-describedby="popover-no-header-body"
@@ -224,9 +243,10 @@ cssPrefix: pf-c-popover
 
 ### No padding
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right pf-m-no-padding"
+  role="dialog"
   aria-modal="true"
   aria-label="Popover with no padding example"
   aria-describedby="popover-no-padding-body"
@@ -244,9 +264,10 @@ cssPrefix: pf-c-popover
 
 ### Width auto
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-right pf-m-width-auto"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-width-auto-header"
   aria-describedby="popover-width-auto-body"
@@ -266,9 +287,10 @@ cssPrefix: pf-c-popover
 
 ### Popover with icon in the title
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -298,9 +320,10 @@ cssPrefix: pf-c-popover
 
 ### Default alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-default pf-m-left"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -334,9 +357,10 @@ cssPrefix: pf-c-popover
 
 ### Info alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-info pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -370,9 +394,10 @@ cssPrefix: pf-c-popover
 
 ### Success alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-success pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -406,9 +431,10 @@ cssPrefix: pf-c-popover
 
 ### Warning alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-warning pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -442,9 +468,10 @@ cssPrefix: pf-c-popover
 
 ### Danger alert popover
 
-```html
+```html isFullscreen
 <div
   class="pf-c-popover pf-m-danger pf-m-top"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-top-header"
   aria-describedby="popover-top-body"
@@ -486,7 +513,7 @@ A popover is used to provide contextual information for another component on cli
 
 | Attribute                                             | Applies to                                                            | Outcome                                                                                                                                                                                                                                                             |
 | ----------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="dialog"`                                       | `.pf-c-popover`                                                       | Identifies the element that serves as the popover container. **Note:** `role="dialog"` is not included on the static examples on this page as it interferes with VoiceOver. Refer to the react examples to see the role in use. **Required**                        |
+| `role="dialog"`                                       | `.pf-c-popover`                                                       | Identifies the element that serves as the popover container. **Required**                                                                                                                                                                                           |
 | `aria-labelledby="[id value of .pf-c-title]"`         | `.pf-c-popover`                                                       | Gives the popover an accessible name by referring to the element that provides the dialog title. **Required when .pf-c-title is present**                                                                                                                           |
 | `aria-label="[title of popover]"`                     | `.pf-c-popover`                                                       | Gives the popover an accessible name. **Required when .pf-c-title is _not_ present**                                                                                                                                                                                |
 | `aria-describedby="[id value of applicable content]"` | `.pf-c-popover`                                                       | Gives the popover an accessible description by referring to the popover content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the popover.                                                        |

package/docs/components/Table/examples/Table.md

@@ -20605,7 +20605,7 @@ There are a few ways this can be handled:
     <thead>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
           role="columnheader"
           aria-sort="none"
           data-label="Example th"
@@ -20622,7 +20622,7 @@ There are a few ways this can be handled:
           </button>
         </th>
         <th
-          class="pf-m-truncate pf-c-table__sort"
+          class="pf-c-table__sort"
           role="columnheader"
           aria-sort="none"
           data-label="Example th"
@@ -20638,43 +20638,43 @@ There are a few ways this can be handled:
           </button>
         </th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 3</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 4</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 5</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 6</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 7</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 8</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20685,7 +20685,7 @@ There are a few ways this can be handled:
     <tbody role="rowgroup">
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20730,7 +20730,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20775,7 +20775,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20820,7 +20820,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20865,7 +20865,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20910,7 +20910,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -20955,7 +20955,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21000,7 +21000,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21045,7 +21045,7 @@ There are a few ways this can be handled:
       </tr>
       <tr role="row">
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21124,7 +21124,7 @@ There are a few ways this can be handled:
           </button>
         </th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
           role="columnheader"
           aria-sort="none"
           data-label="Example th"
@@ -21141,43 +21141,43 @@ There are a few ways this can be handled:
           </button>
         </th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 3</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 4</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 5</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 6</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 7</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
         >Header 8</th>
         <th
-          class="pf-m-truncate"
+          class
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21195,7 +21195,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 1</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21246,7 +21246,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 2</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21297,7 +21297,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 3</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21348,7 +21348,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 4</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21399,7 +21399,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 5</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21450,7 +21450,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 6</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21501,7 +21501,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 7</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21552,7 +21552,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 8</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21603,7 +21603,7 @@ There are a few ways this can be handled:
           style="--pf-c-table__sticky-column--MinWidth: 100px;"
         >Fact 9</th>
         <th
-          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
           role="columnheader"
           data-label="Example th"
           scope="col"
@@ -21682,7 +21682,7 @@ There are a few ways this can be handled:
             </button>
           </th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sort pf-c-table__sticky-column"
             role="columnheader"
             aria-sort="none"
             data-label="Example th"
@@ -21699,43 +21699,43 @@ There are a few ways this can be handled:
             </button>
           </th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
           >Header 3</th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
           >Header 4</th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
           >Header 5</th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
           >Header 6</th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
           >Header 7</th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
           >Header 8</th>
           <th
-            class="pf-m-truncate"
+            class
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -21753,7 +21753,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 1</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -21804,7 +21804,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 2</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -21855,7 +21855,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 3</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -21906,7 +21906,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 4</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -21957,7 +21957,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 5</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -22008,7 +22008,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 6</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -22059,7 +22059,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 7</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -22110,7 +22110,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 8</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"
@@ -22161,7 +22161,7 @@ There are a few ways this can be handled:
             style="--pf-c-table__sticky-column--MinWidth: 100px;"
           >Fact 9</th>
           <th
-            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            class="pf-m-truncate pf-m-border-right pf-c-table__sticky-column"
             role="columnheader"
             data-label="Example th"
             scope="col"

package/docs/demos/Card/examples/Card.md

@@ -1298,6 +1298,7 @@ wrapperTag: div
               <a href="#">Control Panel</a>
               <div
                 class="pf-c-popover pf-m-right"
+                role="dialog"
                 aria-modal="true"
                 aria-labelledby="status-card-expanded-with-popover-example-popover-popover-right-header"
                 aria-describedby="status-card-expanded-with-popover-example-popover-popover-right-body"