@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/components/AppLauncher/examples/application-launcher.md

@@ -1,6 +1,7 @@
 ---
 id: Application launcher
 section: components
+subsection: menus
 cssPrefix: pf-c-app-launcher
 ---import './application-launcher.css'
 
@@ -26,6 +27,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-collapsed-button"
+    role="list"
     hidden
   >
     <li>
@@ -69,6 +71,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-disabled-button"
+    role="list"
     hidden
   >
     <li>
@@ -111,6 +114,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-expanded-button"
+    role="list"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -152,6 +156,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu pf-m-align-right"
     aria-labelledby="application-launcher-aligned-right-button"
+    role="list"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -193,6 +198,7 @@ cssPrefix: pf-c-app-launcher
   <ul
     class="pf-c-app-launcher__menu"
     aria-labelledby="application-launcher-aligned-top-button"
+    role="list"
   >
     <li>
       <a class="pf-c-app-launcher__menu-item" href="#">Link</a>
@@ -233,7 +239,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <section class="pf-c-app-launcher__group">
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Link not in group</a>
         </li>
@@ -242,7 +248,7 @@ cssPrefix: pf-c-app-launcher
     <hr class="pf-c-divider" />
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 1 link</a>
         </li>
@@ -254,7 +260,7 @@ cssPrefix: pf-c-app-launcher
     <hr class="pf-c-divider" />
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 2 link</a>
         </li>
@@ -287,7 +293,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <section class="pf-c-app-launcher__group">
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Link not in group</a>
         </li>
@@ -296,7 +302,7 @@ cssPrefix: pf-c-app-launcher
     </section>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 1 link</a>
         </li>
@@ -308,7 +314,7 @@ cssPrefix: pf-c-app-launcher
     </section>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">Group 2 link</a>
         </li>
@@ -341,7 +347,7 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <section class="pf-c-app-launcher__group">
-      <ul>
+      <ul role="list">
         <li>
           <a class="pf-c-app-launcher__menu-item" href="#">
             <span class="pf-c-app-launcher__menu-item-icon">
@@ -355,7 +361,7 @@ cssPrefix: pf-c-app-launcher
     <li class="pf-c-divider" role="separator"></li>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a
             class="pf-c-app-launcher__menu-item pf-m-external"
@@ -397,7 +403,7 @@ cssPrefix: pf-c-app-launcher
     </section>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li>
           <a
             class="pf-c-app-launcher__menu-item pf-m-external"
@@ -478,7 +484,7 @@ cssPrefix: pf-c-app-launcher
     </div>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
-      <ul>
+      <ul role="list">
         <li class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite">
           <a
             class="pf-c-app-launcher__menu-item pf-m-link"
@@ -534,7 +540,7 @@ cssPrefix: pf-c-app-launcher
     <hr class="pf-c-divider" />
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
-      <ul>
+      <ul role="list">
         <li class="pf-c-app-launcher__menu-wrapper pf-m-external">
           <a
             class="pf-c-app-launcher__menu-item pf-m-link"
@@ -590,7 +596,7 @@ cssPrefix: pf-c-app-launcher
     <hr class="pf-c-divider" />
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Group 2</h1>
-      <ul>
+      <ul role="list">
         <li class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite">
           <a
             class="pf-c-app-launcher__menu-item pf-m-link"
@@ -652,40 +658,40 @@ cssPrefix: pf-c-app-launcher
 
 ### Accessibility
 
-| Attribute                           | Applied                                           | Outcome                                                                                                            |
-| ----------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `aria-label="Application launcher"` | `.pf-c-app-launcher`                              | Gives the app launcher element an accessible name. **Required**                                                    |
-| `aria-expanded="false"`             | `.pf-c-button`                                    | Indicates that the menu is hidden.                                                                                 |
-| `aria-expanded="true"`              | `.pf-c-button`                                    | Indicates that the menu is visible.                                                                                |
-| `aria-label="Actions"`              | `.pf-c-button`                                    | Provides an accessible name for the app launcher when an icon is used. **Required**                                |
-| `hidden`                            | `.pf-c-app-launcher__menu`                        | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `disabled`                          | `.pf-c-app-launcher__toggle`                      | Disables the app launcher toggle and removes it from keyboard focus.                                               |
-| `disabled`                          | `button.pf-c-app-launcher__menu-item`             | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.     |
-| `aria-disabled="true"`              | `a.pf-c-app-launcher__menu-item`                  | When the menu item uses a link element, indicates that it is unavailable.                                          |
-| `tabindex="-1"`                     | `a.pf-c-app-launcher__menu-item`                  | When the menu item uses a link element, removes it from keyboard focus.                                            |
-| `aria-hidden="true"`                | `.pf-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies.                                                                        |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `aria-label="Application launcher"` | `.pf-c-app-launcher` |  Gives the app launcher element an accessible name. **Required** |
+| `aria-expanded="false"` | `.pf-c-button` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-button` |  Indicates that the menu is visible. |
+| `aria-label="Actions"` | `.pf-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
+| `hidden` | `.pf-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `disabled` | `.pf-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
+| `disabled` | `button.pf-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
+| `aria-hidden="true"` | `.pf-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
 
 ### Usage
 
-| Class                                         | Applied                                                                      | Outcome                                                                                                |
-| --------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `.pf-c-app-launcher`                          | `<nav>`                                                                      | Defines the parent wrapper of the app launcher.                                                        |
-| `.pf-c-app-launcher__toggle`                  | `<button>`                                                                   | Defines the app launcher toggle.                                                                       |
-| `.pf-c-app-launcher__menu`                    | `<ul>`, `<div>`                                                              | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups.           |
-| `.pf-c-app-launcher__menu-search`             | `<div>`                                                                      | Defines the wrapper for the search input.                                                              |
-| `.pf-c-app-launcher__group`                   | `<section>`                                                                  | Defines a group of items. Required when there is more than one group.                                  |
-| `.pf-c-app-launcher__group-title`             | `<h1>`                                                                       | Defines a title for a group of items.                                                                  |
-| `.pf-c-app-launcher__menu-wrapper`            | `<li>`                                                                       | Defines a menu wrapper for use with multiple actionable items in a single item row.                    |
-| `.pf-c-app-launcher__menu-item`               | `<a>`, `<button>`                                                            | Defines a menu item.                                                                                   |
-| `.pf-c-app-launcher__menu-item-icon`          | `<span>`                                                                     | Defines the wrapper for the menu item icon.                                                            |
-| `.pf-c-app-launcher__menu-item-external-icon` | `<span>`                                                                     | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
-| `.pf-m-expanded`                              | `.pf-c-app-launcher`                                                         | Modifies for the expanded state.                                                                       |
-| `.pf-m-top`                                   | `.pf-c-app-launcher`                                                         | Modifies to display the menu above the toggle.                                                         |
-| `.pf-m-align-right`                           | `.pf-c-app-launcher__menu`                                                   | Modifies to display the menu aligned to the right edge of the toggle.                                  |
-| `.pf-m-static`                                | `.pf-c-app-launcher__menu`                                                   | Modifies to position the menu statically to support custom positioning.                                |
-| `.pf-m-disabled`                              | `a.pf-c-app-launcher__menu-item`                                             | Modifies to display the menu item as disabled.                                                         |
-| `.pf-m-external`                              | `.pf-c-app-launcher__menu-item`                                              | Modifies to display the menu item as having an external link icon on hover/focus.                      |
-| `.pf-m-favorite`                              | `.pf-c-app-launcher__menu-wrapper`                                           | Modifies wrapper to indicate that the item row has been favorited.                                     |
-| `.pf-m-link`                                  | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item for link styles.                                                                         |
-| `.pf-m-action`                                | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item to for action styles.                                                                    |
-| `.pf-m-active`                                | `.pf-c-app-launcher__toggle`                                                 | Forces display of the active state of the toggle.                                                      |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
+| `.pf-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
+| `.pf-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
+| `.pf-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
+| `.pf-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
+| `.pf-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
+| `.pf-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
+| `.pf-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
+| `.pf-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
+| `.pf-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
+| `.pf-m-expanded` | `.pf-c-app-launcher` | Modifies for the expanded state. |
+| `.pf-m-top` | `.pf-c-app-launcher` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-right` | `.pf-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
+| `.pf-m-static` | `.pf-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
+| `.pf-m-disabled` | `a.pf-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
+| `.pf-m-external` | `.pf-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
+| `.pf-m-favorite` | `.pf-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
+| `.pf-m-link` | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item for link styles. |
+| `.pf-m-action` | `.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item` | Modifies item to for action styles. |
+| `.pf-m-active` | `.pf-c-app-launcher__toggle` | Forces display of the active state of the toggle. |

package/docs/components/Avatar/examples/Avatar.md

@@ -91,18 +91,18 @@ The avatar component provides a default SVG icon. If an image is used it should
 
 ### Accessibility
 
-| Attribute | Applied to     | Outcome                                                                                   |
-| --------- | -------------- | ----------------------------------------------------------------------------------------- |
-| `alt`     | `.pf-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `alt` | `.pf-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
 
 ### Usage
 
-| Class                        | Applied to     | Outcome                                                                                                                                                                             |
-| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-avatar`               | `<img>`        | Initiates an avatar image. **Required**                                                                                                                                             |
-| `.pf-m-light`                | `.pf-c-avatar` | Modifies an avatar for use against a light background.                                                                                                                              |
-| `.pf-m-dark`                 | `.pf-c-avatar` | Modifies an avatar for use against a dark background.                                                                                                                               |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
+| `.pf-m-light` | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
+| `.pf-m-dark` | `.pf-c-avatar` | Modifies an avatar for use against a dark background. |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/BackToTop/examples/BackToTop.md

@@ -24,7 +24,7 @@ cssPrefix: pf-c-back-to-top
 
 ### Usage
 
-| Class               | Applied to          | Outcome                                           |
-| ------------------- | ------------------- | ------------------------------------------------- |
-| `.pf-c-back-to-top` | `<div>`             | Initiates the back to top component. **Required** |
-| `.pf-m-hidden`      | `.pf-c-back-to-top` | Modifies the component to be hidden.              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-back-to-top` | `<div>` | Initiates the back to top component. **Required** |
+| `.pf-m-hidden` | `.pf-c-back-to-top` | Modifies the component to be hidden. |

package/docs/components/Backdrop/examples/Backdrop.md

@@ -19,7 +19,7 @@ This component puts a backdrop over the entire viewport.
 
 ### Usage
 
-| Class                  | Applied to | Outcome                                                                                                                                                    |
-| ---------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-backdrop`       | `<div>`    | Initiates backdrop. **Required**                                                                                                                           |
-| `.pf-c-backdrop__open` | `<body>`   | Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-backdrop` | `<div>` |  Initiates backdrop. **Required** |
+| `.pf-c-backdrop__open` | `<body>` |  Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -7,30 +7,7 @@ cssPrefix: pf-c-background-image
 ### Basic
 
 ```html isFullscreen
-<div class="pf-c-background-image">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="pf-c-background-image__filter"
-    width="0"
-    height="0"
-  >
-    <filter id="image_overlay">
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0"
-      />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncA type="table" tableValues="0 1" />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
+<div class="pf-c-background-image"></div>
 
 ```
 
@@ -38,11 +15,18 @@ cssPrefix: pf-c-background-image
 
 ### Overview
 
-This component puts an image on the background with an svg filter applied to it. The svg must be inline on the page for the filter to work in all browsers.
+This component puts an image on the background.
+
+### Customizing the background image
+
+In order to use a custom image, pass a new value to the `--pf-c-background-image--BackgroundImage` CSS variable. For example:
+
+```css
+--pf-c-background-image--BackgroundImage: url("custom/image/path");
+```
 
 ### Usage
 
-| Class                            | Applied to | Outcome                                                            |
-| -------------------------------- | ---------- | ------------------------------------------------------------------ |
-| `.pf-c-background-image`         | `*`        | A fixed background image is applied to the background of the page. |
-| `.pf-c-background-image__filter` | `*`        | The inline svg that provides the filter for the background image.  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-background-image` | `*` |  A fixed background image is applied to the background of the page. |

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

@@ -32,8 +32,8 @@ Always add a modifier class. Never use the class `.pf-c-badge` on its own.
 
 ### Usage
 
-| Class          | Applied to    | Outcome                                                  |
-| -------------- | ------------- | -------------------------------------------------------- |
-| `.pf-c-badge`  | `<span>`      | Initiates a badge. **Always use with a modifier class.** |
-| `.pf-m-read`   | `.pf-c-badge` | Applies read badge styling.                              |
-| `.pf-m-unread` | `.pf-c-badge` | Applies unread badge styling.                            |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
+| `.pf-m-read` | `.pf-c-badge` | Applies read badge styling. |
+| `.pf-m-unread` | `.pf-c-badge` | Applies unread badge styling. |

package/docs/components/Banner/examples/Banner.md

@@ -151,11 +151,11 @@ Add a modifier class to the default banner to change the presentation: `.pf-m-bl
 
 ### Usage
 
-| Class          | Applied to     | Outcome                                                   |
-| -------------- | -------------- | --------------------------------------------------------- |
-| `.pf-c-banner` | `<div>`        | Initiates a banner. **Required**                          |
-| `.pf-m-blue`   | `.pf-c-banner` | Modifies banner for blue styling.                         |
-| `.pf-m-red`    | `.pf-c-banner` | Modifies banner for red styling.                          |
-| `.pf-m-green`  | `.pf-c-banner` | Modifies banner for green styling.                        |
-| `.pf-m-gold`   | `.pf-c-banner` | Modifies banner for gold styling.                         |
-| `.pf-m-sticky` | `.pf-c-banner` | Modifies banner to be sticky to the top of its container. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-banner` | `<div>` |  Initiates a banner. **Required** |
+| `.pf-m-blue` | `.pf-c-banner` |  Modifies banner for blue styling. |
+| `.pf-m-red` | `.pf-c-banner` |  Modifies banner for red styling. |
+| `.pf-m-green` | `.pf-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-gold` | `.pf-c-banner` |  Modifies banner for gold styling. |
+| `.pf-m-sticky` | `.pf-c-banner` |  Modifies banner to be sticky to the top of its container. |

package/docs/components/Brand/examples/Brand.md

@@ -50,15 +50,15 @@ Simple brand component.
 
 ### Accessibility
 
-| Attribute | Applied to    | Outcome                                                                                                    |
-| --------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
-| `alt`     | `.pf-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `alt` | `.pf-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
 
 ### Usage
 
-| Class                                              | Applied to         | Outcome                                                                                                                                             |
-| -------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-brand`                                      | `<img>, <picture>` | Initiates a brand image. **Required**                                                                                                               |
-| `.pf-m-picture`                                    | `.pf-c-brand`      | Modifies a brand image to a picture.                                                                                                                |
-| `--pf-c-brand--Width{-on-[breakpoint]}: {width}`   | `.pf-c-brand`      | Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
-| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand`      | Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
+| `.pf-m-picture` | `.pf-c-brand` |  Modifies a brand image to a picture. |
+| `--pf-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

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

@@ -10,7 +10,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -48,7 +48,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -98,7 +98,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -144,7 +144,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -235,7 +235,7 @@ cssPrefix: pf-c-breadcrumb
 
 ```html
 <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-  <ol class="pf-c-breadcrumb__list">
+  <ol class="pf-c-breadcrumb__list" role="list">
     <li class="pf-c-breadcrumb__item">
       <span class="pf-c-breadcrumb__item-divider">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -275,26 +275,26 @@ cssPrefix: pf-c-breadcrumb
 
 A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
 
--   `.pf-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+*   `.pf-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
 
 In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
 
 ### Accessibility
 
-| Attribute                             | Applied to                                         | Outcome                                           |
-| ------------------------------------- | -------------------------------------------------- | ------------------------------------------------- |
-| `aria-label="[landmark description]"` | `.pf-c-breadcrumb`                                 | Describes `<nav>` landmark.                       |
-| `aria-label="[link name]"`            | `.pf-c-breadcrumb__link`                           | If link has no text (icon), add an aria-label.    |
-| `aria-current="page"`                 | `.pf-c-breadcrumb__item`, `.pf-c-breadcrumb__link` | Indicates the current page within a set of pages. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[landmark description]"` | `.pf-c-breadcrumb` |  Describes `<nav>` landmark. |
+| `aria-label="[link name]"` | `.pf-c-breadcrumb__link` | If link has no text (icon), add an aria-label. |
+| `aria-current="page"` | `.pf-c-breadcrumb__item`, `.pf-c-breadcrumb__link` |  Indicates the current page within a set of pages. |
 
 ### Usage
 
-| Class                            | Applied to               | Outcome                                                |
-| -------------------------------- | ------------------------ | ------------------------------------------------------ |
-| `.pf-c-breadcrumb`               | `<nav>`                  | Initiates a primary breadcrumb element. **Required**   |
-| `.pf-c-breadcrumb__list`         | `<ol>`                   | Initiates default breadcrumb ordered list.             |
-| `.pf-c-breadcrumb__item`         | `<li>`                   | Initiates default breadcrumb list item.                |
-| `.pf-c-breadcrumb__item-divider` | `<span>`                 | Initiates default breadcrumb list item divider.        |
-| `.pf-c-breadcrumb__link`         | `<a>`, `<button>`        | Initiates default breadcrumb list link.                |
-| `.pf-c-breadcrumb__title`        | `<h1>`                   | Initiates breadcrumb header.                           |
-| `.pf-m-current`                  | `.pf-c-breadcrumb__link` | Modifies to display the list item as the current item. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-breadcrumb` | `<nav>` | Initiates a primary breadcrumb element. **Required** |
+| `.pf-c-breadcrumb__list` | `<ol>` | Initiates default breadcrumb ordered list. |
+| `.pf-c-breadcrumb__item` | `<li>` | Initiates default breadcrumb list item. |
+| `.pf-c-breadcrumb__item-divider` | `<span>` | Initiates default breadcrumb list item divider. |
+| `.pf-c-breadcrumb__link` | `<a>`, `<button>` | Initiates default breadcrumb list link. |
+| `.pf-c-breadcrumb__title` | `<h1>` | Initiates breadcrumb header. |
+| `.pf-m-current` | `.pf-c-breadcrumb__link` | Modifies to display the list item as the current item. |

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

@@ -479,41 +479,41 @@ Semantic buttons and links are important for usability as well as accessibility.
 
 ### Accessibility
 
-| Attribute                          | Applied to                                                                            | Outcome                                                                                                                                                                                        |
-| ---------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-pressed="true or false"`     | `.pf-c-button`                                                                        | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle**               |
-| `aria-label="[button label text]"` | `.pf-c-button.pf-m-plain`                                                             | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text**                                                        |
-| `aria-label="[descriptive text]"`  | `a.pf-c-button`, `span.pf-c-button.pf-m-link.pf-m-inline`                             | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information.                                            |
-| `disabled`                         | `button.pf-c-button`                                                                  | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled**                                                       |
-| `aria-disabled="true"`             | `button.pf-c-button`                                                                  | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
-| `aria-disabled="true"`             | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled**                                                                                     |
-| `aria-expanded="true"`             | `.pf-c-button.pf-m-expanded`                                                          | Indicates that the expanded content element is visible. **Required**                                                                                                                           |
-| `tabindex="-1"`                    | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled**                                                                                       |
-| `tabindex="0"`                     | `span.pf-c-button.pf-m-link.pf-m-inline`                                              | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span**                                                                               |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-pressed="true or false"` | `.pf-c-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
+| `aria-label="[button label text]"` | `.pf-c-button.pf-m-plain` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
+| `aria-label="[descriptive text]"` | `a.pf-c-button`, `span.pf-c-button.pf-m-link.pf-m-inline` | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information. |
+| `disabled` | `button.pf-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
+| `aria-disabled="true"` | `button.pf-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
+| `aria-disabled="true"` | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
+| `aria-expanded="true"` | `.pf-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
+| `tabindex="-1"` | `a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled** |
+| `tabindex="0"` | `span.pf-c-button.pf-m-link.pf-m-inline` | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span** |
 
 ### Usage
 
-| Class                    | Applied to                              | Outcome                                                                                                                                                                                                                     |
-| ------------------------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-button`           | `<button>`                              | Initiates a button. Always use it with a modifier class. **Required**                                                                                                                                                       |
-| `.pf-c-button__icon`     | `<span>`                                | Initiates a button icon.                                                                                                                                                                                                    |
-| `.pf-c-button__progress` | `<span>`                                | Initiates a button progress container.                                                                                                                                                                                      |
-| `.pf-c-button__count`    | `<span>`                                | Initiates a button count container. **Note:** Count should only be used on link buttons.                                                                                                                                    |
-| `.pf-m-primary`          | `.pf-c-button`                          | Modifies for primary styles.                                                                                                                                                                                                |
-| `.pf-m-secondary`        | `.pf-c-button`                          | Modifies for secondary styles.                                                                                                                                                                                              |
-| `.pf-m-tertiary`         | `.pf-c-button`                          | Modifies for tertiary styles.                                                                                                                                                                                               |
-| `.pf-m-danger`           | `.pf-c-button`                          | Modifies for danger styles.                                                                                                                                                                                                 |
-| `.pf-m-link`             | `.pf-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-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-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. |
-| `.pf-m-block`            | `.pf-c-button`                          | Creates a block level button.                                                                                                                                                                                               |
-| `.pf-m-control`          | `.pf-c-button`                          | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components.                                                                                |
-| `.pf-m-expanded`         | `.pf-c-button.pf-m-control`             | Modifies a control button for the expanded state.                                                                                                                                                                           |
-| `.pf-m-start`            | `.pf-c-button__icon`                    | Applies right spacing to an icon inside of a button when the icon comes before text.                                                                                                                                        |
-| `.pf-m-end`              | `.pf-c-button__icon`                    | Applies left spacing to an icon inside of a button when the icon comes after text.                                                                                                                                          |
-| `.pf-m-active`           | `.pf-c-button`                          | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state.                                                           |
-| `.pf-m-small`            | `.pf-c-button`                          | Modifies the button so that it has small font size.                                                                                                                                                                         |
-| `.pf-m-aria-disabled`    | `.pf-c-button`                          | Modifies a button to be visually disabled, yet is still focusable.                                                                                                                                                          |
-| `.pf-m-display-lg`       | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles.                                                                                           |
-| `.pf-m-progress`         | `.pf-c-button`                          | Indicates that the button supports the progress state. **Note:** Not used with the plain variation.                                                                                                                         |
-| `.pf-m-in-progress`      | `.pf-c-button`                          | Indicates that the button is in the in progress state.                                                                                                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-button` | `<button>` |  Initiates a button. Always use it with a modifier class. **Required** |
+| `.pf-c-button__icon` | `<span>` | Initiates a button icon. |
+| `.pf-c-button__progress` | `<span>` | Initiates a button progress container. |
+| `.pf-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-m-primary` | `.pf-c-button` | Modifies for primary styles. |
+| `.pf-m-secondary` | `.pf-c-button` | Modifies for secondary styles. |
+| `.pf-m-tertiary` | `.pf-c-button` | Modifies for tertiary styles. |
+| `.pf-m-danger` | `.pf-c-button` | Modifies for danger styles. |
+| `.pf-m-link` | `.pf-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-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-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. |
+| `.pf-m-block` | `.pf-c-button` | Creates a block level button. |
+| `.pf-m-control` | `.pf-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
+| `.pf-m-expanded` | `.pf-c-button.pf-m-control` | Modifies a control button for the expanded state. |
+| `.pf-m-start` | `.pf-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
+| `.pf-m-end` | `.pf-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
+| `.pf-m-active` | `.pf-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
+| `.pf-m-small` | `.pf-c-button` | Modifies the button so that it has small font size. |
+| `.pf-m-aria-disabled` | `.pf-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
+| `.pf-m-display-lg` | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
+| `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
+| `.pf-m-in-progress` | `.pf-c-button` | Indicates that the button is in the in progress state. |