@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

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

@@ -26,6 +26,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 +70,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 +113,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 +155,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 +197,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 +238,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 +247,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 +259,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 +292,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 +301,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 +313,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 +346,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 +360,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 +402,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 +483,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 +539,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 +595,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 +657,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

@@ -42,7 +42,7 @@ This component puts an image on the background with an svg filter applied to it.
 
 ### 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. |
+| `.pf-c-background-image__filter` | `*` |  The inline svg that provides the filter for the background image. |

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. |