@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.11

package/docs/components/Badge/examples/Badge.md

@@ -17,10 +17,22 @@ cssPrefix: pf-v5-c-badge
 ### Unread
 
 ```html
-<span class="pf-v5-c-badge pf-m-unread">7</span>
-<span class="pf-v5-c-badge pf-m-unread">24</span>
-<span class="pf-v5-c-badge pf-m-unread">240</span>
-<span class="pf-v5-c-badge pf-m-unread">999+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  7
+  <span class="pf-v5-screen-reader">unread messages</span>
+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  24
+  <span class="pf-v5-screen-reader">unread messages</span>
+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  240
+  <span class="pf-v5-screen-reader">unread messages</span>
+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  999+
+  <span class="pf-v5-screen-reader">unread messages</span>
+</span>
 
 ```
 

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -179,34 +179,40 @@ cssPrefix: pf-v5-c-breadcrumb
           <ul
             class="pf-v5-c-dropdown__menu"
             aria-labelledby="dropdown-badge-toggle-button"
+            role="menu"
           >
-            <li>
+            <li role="none">
               <button
                 class="pf-v5-c-dropdown__menu-item"
+                role="menuitem"
                 type="button"
               >Section title</button>
             </li>
-            <li>
+            <li role="none">
               <button
                 class="pf-v5-c-dropdown__menu-item"
+                role="menuitem"
                 type="button"
               >Section title</button>
             </li>
-            <li>
+            <li role="none">
               <button
                 class="pf-v5-c-dropdown__menu-item"
+                role="menuitem"
                 type="button"
               >Section title</button>
             </li>
-            <li>
+            <li role="none">
               <button
                 class="pf-v5-c-dropdown__menu-item"
+                role="menuitem"
                 type="button"
               >Section title</button>
             </li>
-            <li>
+            <li role="none">
               <button
                 class="pf-v5-c-dropdown__menu-item"
+                role="menuitem"
                 type="button"
               >Section title</button>
             </li>

package/docs/components/Button/examples/Button.css

@@ -1,4 +1,4 @@
 .ws-core-c-button .pf-v5-c-button {
-  margin-right: 6px;
-  margin-bottom: 6px;
+  margin-inline-end: 6px;
+  margin-block-end: 6px;
 }

package/docs/components/Button/examples/Button.md

@@ -530,6 +530,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-secondary` | `.pf-v5-c-button` | Modifies for secondary styles. |
 | `.pf-m-tertiary` | `.pf-v5-c-button` | Modifies for tertiary styles. |
 | `.pf-m-danger` | `.pf-v5-c-button` | Modifies for danger styles. |
+| `.pf-m-warning` | `.pf-v5-c-button` | Modifies for warning styles. |
 | `.pf-m-link` | `.pf-v5-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
 | `.pf-m-plain` | `.pf-v5-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
 | `.pf-m-inline` | `.pf-v5-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |

package/docs/components/Card/examples/Card.md

@@ -42,31 +42,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-action-example-1-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -113,31 +124,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-action-example-2-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -186,31 +208,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-action-example-3-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -1049,31 +1082,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-expandable-example-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -1140,31 +1184,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-expandable-image-example-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -1216,31 +1271,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-expanded-example-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -1289,31 +1355,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-full-height-example-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -1362,31 +1439,42 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-dropdown__menu pf-m-align-right"
           aria-labelledby="card-toggle-on-right-example-dropdown-kebab-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>

package/docs/components/Chip/examples/Chip.md

@@ -93,7 +93,11 @@ cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ### Simple inline chip group with overflow
 
 ```html
-<div class="pf-v5-c-chip-group">
+<div
+  class="pf-v5-c-chip-group"
+  role="group"
+  aria-label="simple inline chip group with overflow"
+>
   <div class="pf-v5-c-chip-group__main">
     <ul
       class="pf-v5-c-chip-group__list"
@@ -179,7 +183,11 @@ cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ### Simple inline chip group expanded
 
 ```html
-<div class="pf-v5-c-chip-group">
+<div
+  class="pf-v5-c-chip-group"
+  role="group"
+  aria-label="simple inline chip group expanded"
+>
   <div class="pf-v5-c-chip-group__main">
     <ul
       class="pf-v5-c-chip-group__list"
@@ -307,11 +315,14 @@ cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ### Chip group with categories
 
 ```html
-<div class="pf-v5-c-chip-group pf-m-category">
+<div
+  class="pf-v5-c-chip-group pf-m-category"
+  role="group"
+  aria-labelledby="chip-group-with-categories-label"
+>
   <div class="pf-v5-c-chip-group__main">
     <span
       class="pf-v5-c-chip-group__label"
-      aria-hidden="true"
       id="chip-group-with-categories-label"
     >Category one</span>
     <ul
@@ -391,11 +402,14 @@ cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ### Chip group with categories and overflow
 
 ```html
-<div class="pf-v5-c-chip-group pf-m-category">
+<div
+  class="pf-v5-c-chip-group pf-m-category"
+  role="group"
+  aria-labelledby="chip-group-with-categories-overflow-label"
+>
   <div class="pf-v5-c-chip-group__main">
     <span
       class="pf-v5-c-chip-group__label"
-      aria-hidden="true"
       id="chip-group-with-categories-overflow-label"
     >Category one</span>
     <ul
@@ -482,11 +496,14 @@ cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ### Chip group with categories and overflow expanded
 
 ```html
-<div class="pf-v5-c-chip-group pf-m-category">
+<div
+  class="pf-v5-c-chip-group pf-m-category"
+  role="group"
+  aria-labelledby="chip-group-with-categories-overflow-expanded-label"
+>
   <div class="pf-v5-c-chip-group__main">
     <span
       class="pf-v5-c-chip-group__label"
-      aria-hidden="true"
       id="chip-group-with-categories-overflow-expanded-label"
     >Category one</span>
     <ul
@@ -615,11 +632,14 @@ cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ### Chip group with removable categories
 
 ```html
-<div class="pf-v5-c-chip-group pf-m-category">
+<div
+  class="pf-v5-c-chip-group pf-m-category"
+  role="group"
+  aria-labelledby="chip-group-with-categories-removable-label"
+>
   <div class="pf-v5-c-chip-group__main">
     <span
       class="pf-v5-c-chip-group__label"
-      aria-hidden="true"
       id="chip-group-with-categories-removable-label"
     >Category one</span>
     <ul
@@ -808,7 +828,7 @@ The chip group requires the [chip component](#chip-overview). **All single chip
 
 | Attributes for closable chip group button | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"` | `.pf-v5-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |