@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -8,7 +8,7 @@ cssPrefix: pf-c-jump-links
 
 ```html
 <nav class="pf-c-jump-links">
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -33,7 +33,7 @@ cssPrefix: pf-c-jump-links
 
 ```html
 <nav class="pf-c-jump-links pf-m-center">
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -62,7 +62,7 @@ cssPrefix: pf-c-jump-links
     <div class="pf-c-jump-links__header">
       <div class="pf-c-jump-links__label">Jump to section</div>
     </div>
-    <ul class="pf-c-jump-links__list">
+    <ul class="pf-c-jump-links__list" role="list">
       <li class="pf-c-jump-links__item">
         <a class="pf-c-jump-links__link" href="#">
           <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -87,7 +87,7 @@ cssPrefix: pf-c-jump-links
     <div class="pf-c-jump-links__header">
       <div class="pf-c-jump-links__label">Jump to section</div>
     </div>
-    <ul class="pf-c-jump-links__list">
+    <ul class="pf-c-jump-links__list" role="list">
       <li class="pf-c-jump-links__item">
         <a class="pf-c-jump-links__link" href="#">
           <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -113,7 +113,7 @@ cssPrefix: pf-c-jump-links
 
 ```html
 <nav class="pf-c-jump-links pf-m-vertical">
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -151,7 +151,7 @@ cssPrefix: pf-c-jump-links
   <div class="pf-c-jump-links__header">
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -189,7 +189,7 @@ cssPrefix: pf-c-jump-links
   <div class="pf-c-jump-links__header">
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item pf-m-current">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Active section</span>
@@ -204,7 +204,7 @@ cssPrefix: pf-c-jump-links
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
       </a>
-      <ul class="pf-c-jump-links__list">
+      <ul class="pf-c-jump-links__list" role="list">
         <li class="pf-c-jump-links__item">
           <a class="pf-c-jump-links__link" href="#">
             <span class="pf-c-jump-links__link-text">Inactive subsection</span>
@@ -239,7 +239,7 @@ cssPrefix: pf-c-jump-links
   <div class="pf-c-jump-links__header">
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -254,7 +254,7 @@ cssPrefix: pf-c-jump-links
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Active section</span>
       </a>
-      <ul class="pf-c-jump-links__list">
+      <ul class="pf-c-jump-links__list" role="list">
         <li class="pf-c-jump-links__item pf-m-current">
           <a class="pf-c-jump-links__link" href="#">
             <span class="pf-c-jump-links__link-text">Active subsection</span>
@@ -305,7 +305,7 @@ cssPrefix: pf-c-jump-links
     </div>
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -359,7 +359,7 @@ cssPrefix: pf-c-jump-links
     </div>
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -413,7 +413,7 @@ cssPrefix: pf-c-jump-links
     </div>
     <div class="pf-c-jump-links__label">Jump to section</div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -465,7 +465,7 @@ cssPrefix: pf-c-jump-links
       </button>
     </div>
   </div>
-  <ul class="pf-c-jump-links__list">
+  <ul class="pf-c-jump-links__list" role="list">
     <li class="pf-c-jump-links__item">
       <a class="pf-c-jump-links__link" href="#">
         <span class="pf-c-jump-links__link-text">Inactive section</span>
@@ -502,28 +502,28 @@ cssPrefix: pf-c-jump-links
 
 ### Accessibility
 
-| Attribute    | Applied to         | Outcome                                         |
-| ------------ | ------------------ | ----------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `aria-label` | `.pf-c-jump-links` | Provides an accessible name for the jump links. |
 
 ### Usage
 
-| Class                                    | Applied to               | Outcome                                                                                                                                                                                                                     |
-| ---------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-jump-links`                       | `<div>`                  | Initiates the jump links container.                                                                                                                                                                                         |
-| `.pf-c-jump-links__header`               | `<div>`                  | Initiates the jump links header.                                                                                                                                                                                            |
-| `.pf-c-jump-links__toggle`               | `<div>`                  | Initiates the jump links expandable toggle.                                                                                                                                                                                 |
-| `.pf-c-jump-links__toggle-text`          | `<span>`                 | Initiates the jump links expandable toggle text.                                                                                                                                                                            |
-| `.pf-c-jump-links__toggle-icon`          | `<span>`                 | Initiates the jump links expandable toggle icon.                                                                                                                                                                            |
-| `.pf-c-jump-links__label`                | `<div>`                  | Initiates the jump links label.                                                                                                                                                                                             |
-| `.pf-c-jump-links__main`                 | `<div>`                  | Initiates the jump links main container for when a label and list is used in the horizontal variation.                                                                                                                      |
-| `.pf-c-jump-links__list`                 | `<ul>`                   | Initiates the jump links list.                                                                                                                                                                                              |
-| `.pf-c-jump-links__item`                 | `<li>`                   | Initiates the jump links list item.                                                                                                                                                                                         |
-| `.pf-c-jump-links__link`                 | `<button>`               | Initiates the jump links link.                                                                                                                                                                                              |
-| `.pf-c-jump-links__link-text`            | `<div>`                  | Initiates the jump links link text.                                                                                                                                                                                         |
-| `.pf-m-vertical`                         | `.pf-c-jump-links`       | Modifies the jump links component to be vertical.                                                                                                                                                                           |
-| `.pf-m-center`                           | `.pf-c-jump-links`       | Modifies the jump links component to center its list and label.                                                                                                                                                             |
-| `.pf-m-expandable{-on-[breakpoint]}`     | `.pf-c-jump-links`       | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links`       | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                         |
-| `.pf-m-expanded`                         | `.pf-c-jump-links`       | Modifies the expandable jump links component for the expanded state.                                                                                                                                                        |
-| `.pf-m-current`                          | `.pf-c-jump-links__item` | Modifies the jump links item to be current.                                                                                                                                                                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-jump-links` | `<div>` | Initiates the jump links container. |
+| `.pf-c-jump-links__header` | `<div>` | Initiates the jump links header. |
+| `.pf-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
+| `.pf-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
+| `.pf-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
+| `.pf-c-jump-links__label` | `<div>` | Initiates the jump links label. |
+| `.pf-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
+| `.pf-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
+| `.pf-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
+| `.pf-c-jump-links__link` | `<button>` | Initiates the jump links link. |
+| `.pf-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
+| `.pf-m-vertical` | `.pf-c-jump-links` | Modifies the jump links component to be vertical. |
+| `.pf-m-center` | `.pf-c-jump-links` | Modifies the jump links component to center its list and label. |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-expanded` | `.pf-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
+| `.pf-m-current` | `.pf-c-jump-links__item`| Modifies the jump links item to be current. |

package/docs/components/Label/examples/Label.md

@@ -1277,17 +1277,17 @@ This style of label is used to indicate overflow within a label group.
 
 **Note: Editable label behavior must be handled with JavaScript.**
 
--   `.pf-c-label__editable-text` onClick event should:
-    -   Set `.pf-m-editable-active` on `.pf-c-label`
-    -   Change `.pf-c-label__editable-text`from a button to an input
--   Return keypress, when content is editable, should:
-    -   Be captured to prevent line wrapping and save updates to label text
-    -   Remove `.pf-m-editable-active` from `.pf-c-label`
-    -   Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
--   Esc keypress, when content is editable, should:
-    -   Undo any update to label text
-    -   Remove `.pf-m-editable-active` from `.pf-c-label`
-    -   Change `.pf-c-label__editable-text` back to a button
+*   `.pf-c-label__editable-text` onClick event should:
+    *   Set `.pf-m-editable-active` on `.pf-c-label`
+    *   Change `.pf-c-label__editable-text`from a button to an input
+*   Return keypress, when content is editable, should:
+    *   Be captured to prevent line wrapping and save updates to label text
+    *   Remove `.pf-m-editable-active` from `.pf-c-label`
+    *   Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
+*   Esc keypress, when content is editable, should:
+    *   Undo any update to label text
+    *   Remove `.pf-m-editable-active` from `.pf-c-label`
+    *   Change `.pf-c-label__editable-text` back to a button
 
 ```html isBeta
 <span class="pf-c-label pf-m-blue pf-m-editable">
@@ -1367,23 +1367,23 @@ This style of label is used to add new labels to a label group.
 
 ### Usage
 
-| Class                        | Applied to                  | Outcome                                                                                                                                                                                                                  |
-| ---------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-label`                | `<span>`, `<button>`        | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
-| `.pf-c-label__content`       | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required**                                                                          |
-| `.pf-c-label__icon`          | `<span>`                    | Initiates a label icon.                                                                                                                                                                                                  |
-| `.pf-c-label__text`          | `<span>`                    | Initiates label text.                                                                                                                                                                                                    |
-| `.pf-c-label__editable-text` | `<button>`, `<input>`       | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.                                                                                                  |
-| `.pf-m-outline`              | `.pf-c-label`               | Modifies label for outline styles.                                                                                                                                                                                       |
-| `.pf-m-compact`              | `.pf-c-label`               | Modifies label for compact styles.                                                                                                                                                                                       |
-| `.pf-m-overflow`             | `.pf-c-label`               | Modifies label for overflow styles for use in a label group.                                                                                                                                                             |
-| `.pf-m-add`                  | `.pf-c-label`               | Modifies label for add styles for use in a label group.                                                                                                                                                                  |
-| `.pf-m-blue`                 | `.pf-c-label`               | Modifies the label to have blue colored styling.                                                                                                                                                                         |
-| `.pf-m-green`                | `.pf-c-label`               | Modifies the label to have green colored styling.                                                                                                                                                                        |
-| `.pf-m-orange`               | `.pf-c-label`               | Modifies the label to have orange colored styling.                                                                                                                                                                       |
-| `.pf-m-red`                  | `.pf-c-label`               | Modifies the label to have red colored styling.                                                                                                                                                                          |
-| `.pf-m-purple`               | `.pf-c-label`               | Modifies the label to have purple colored styling.                                                                                                                                                                       |
-| `.pf-m-cyan`                 | `.pf-c-label`               | Modifies the label to have cyan colored styling.                                                                                                                                                                         |
-| `.pf-m-gold`                 | `.pf-c-label`               | Modifies the label to have gold colored styling.                                                                                                                                                                         |
-| `.pf-m-editable`             | `.pf-c-label`               | Modifies label for editable styles.                                                                                                                                                                                      |
-| `.pf-m-editable-active`      | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles.                                                                                                                                                                               |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
+| `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
+| `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
+| `.pf-c-label__text` | `<span>` | Initiates label text. |
+| `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
+| `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
+| `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
+| `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
+| `.pf-m-add` | `.pf-c-label` | Modifies label for add styles for use in a label group. |
+| `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
+| `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
+| `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
+| `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
+| `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
+| `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
+| `.pf-m-gold` | `.pf-c-label` | Modifies the label to have gold colored styling. |
+| `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
+| `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |

package/docs/components/LabelGroup/examples/LabelGroup.md

@@ -606,7 +606,7 @@ cssPrefix: pf-c-label-group
 
 In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
 
--   `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
+*   `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 
@@ -1073,27 +1073,27 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ### Accessibility
 
-| Attribute                                                                                                  | Applied to                          | Outcome                                                                                                                                                                                                   |
-| ---------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="list"`                                                                                              | `.pf-c-label-group__list`           | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
-| `aria-label="[button label text]"`                                                                         | `.pf-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required**                                      |
-| `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required**                                                                                                                                                  |
-| `aria-label="[label text]"`                                                                                | `.pf-c-label-group__textarea`       | Provides an accessible name for the textarea. **Required**                                                                                                                                                |
-| `row="1"`                                                                                                  | `.pf-c-label-group__textarea`       | Indicates that the label group textarea is one row. **Required**                                                                                                                                          |
-| `tabindex="0"`                                                                                             | `.pf-c-label-group__textarea`       | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required**                                                                                                     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="list"` | `.pf-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `aria-label="[button label text]"` | `.pf-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
+| `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
+| `aria-label="[label text]"` | `.pf-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
+| `row="1"` | `.pf-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
+| `tabindex="0"` | `.pf-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
-| Class                          | Applied to                          | Outcome                                                                                      |
-| ------------------------------ | ----------------------------------- | -------------------------------------------------------------------------------------------- |
-| `.pf-c-label-group`            | `<div>`                             | Initiates the label group component. **Required.**                                           |
-| `.pf-c-label-group__list`      | `<ul>`                              | Initiates the container for a list of labels. **Required.**                                  |
-| `.pf-c-label-group__list-item` | `<li>`                              | Initiates the list item inside of the label group. **Required.**                             |
-| `.pf-c-label-group__main`      | `<div>`                             | Initiates the main element in the label group. **Required when label and list are present**  |
-| `.pf-c-label-group__textarea`  | `<textarea>`                        | Initiates the textarea element in the label group. **Required when label group is editable** |
-| `.pf-c-label-group__label`     | `<span>`                            | Initiates the label to be used in the label group.                                           |
-| `.pf-c-label-group__close`     | `<div>`                             | Initiates the container used for the button to remove the label group.                       |
-| `.pf-c-button`                 | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group.                                         |
-| `.pf-m-editable`               | `.pf-c-label-group`                 | Modifies the label group to support editable styling.                                        |
-| `.pf-m-category`               | `.pf-c-label-group`                 | Modifies the label group to support category styling.                                        |
-| `.pf-m-textarea`               | `.pf-c-label-group__list-item`      | Modifies the label group list item to support textarea.                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
+| `.pf-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
+| `.pf-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
+| `.pf-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
+| `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
+| `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
+| `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
+| `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
+| `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
+| `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
+| `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |

package/docs/components/List/examples/List.md

@@ -7,17 +7,17 @@ cssPrefix: pf-c-list
 ### Unordered
 
 ```html
-<ul class="pf-c-list">
+<ul class="pf-c-list" role="list">
   <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
   <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
   <li>
     Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-    <ul class="pf-c-list">
+    <ul class="pf-c-list" role="list">
       <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
       <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
       <li>
         Ut venenatis, nisl scelerisque.
-        <ol class="pf-c-list">
+        <ol class="pf-c-list" role="list">
           <li>Donec blandit a lorem id convallis.</li>
           <li>Cras gravida arcu at diam gravida gravida.</li>
           <li>Integer in volutpat libero.</li>
@@ -33,19 +33,19 @@ cssPrefix: pf-c-list
 ### Ordered
 
 ```html
-<ol class="pf-c-list">
+<ol class="pf-c-list" role="list">
   <li>Donec blandit a lorem id convallis.</li>
   <li>Cras gravida arcu at diam gravida gravida.</li>
   <li>Integer in volutpat libero.</li>
   <li>Donec a diam tellus.</li>
   <li>
     Etiam auctor nisl et.
-    <ul class="pf-c-list">
+    <ul class="pf-c-list" role="list">
       <li>Donec blandit a lorem id convallis.</li>
       <li>Cras gravida arcu at diam gravida gravida.</li>
       <li>
         Integer in volutpat libero.
-        <ol class="pf-c-list">
+        <ol class="pf-c-list" role="list">
           <li>Donec blandit a lorem id convallis.</li>
           <li>Cras gravida arcu at diam gravida gravida.</li>
         </ol>
@@ -62,7 +62,7 @@ cssPrefix: pf-c-list
 ### Inline
 
 ```html
-<ul class="pf-c-list pf-m-inline">
+<ul class="pf-c-list pf-m-inline" role="list">
   <li>Inline list item 1</li>
   <li>Inline list item 2</li>
   <li>Inline list item 3</li>
@@ -73,12 +73,12 @@ cssPrefix: pf-c-list
 ### Plain
 
 ```html
-<ul class="pf-c-list pf-m-plain">
+<ul class="pf-c-list pf-m-plain" role="list">
   <li>Donec blandit a lorem id convallis.</li>
   <li>Integer in volutpat libero.</li>
   <li>
     Donec a diam tellus.
-    <ul class="pf-c-list">
+    <ul class="pf-c-list" role="list">
       <li>Donec blandit a lorem id convallis.</li>
       <li>Cras gravida arcu at diam gravida gravida.</li>
       <li>Integer in volutpat libero.</li>
@@ -93,7 +93,7 @@ cssPrefix: pf-c-list
 ### With horizontal rules
 
 ```html
-<ul class="pf-c-list pf-m-plain pf-m-bordered">
+<ul class="pf-c-list pf-m-plain pf-m-bordered" role="list">
   <li>Donec blandit a lorem id convallis.</li>
   <li>Integer in volutpat libero.</li>
   <li>Donec a diam tellus.</li>
@@ -106,7 +106,7 @@ cssPrefix: pf-c-list
 ### With small icons
 
 ```html
-<ul class="pf-c-list pf-m-plain">
+<ul class="pf-c-list pf-m-plain" role="list">
   <li class="pf-c-list__item">
     <span class="pf-c-list__item-icon">
       <i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
@@ -132,7 +132,7 @@ cssPrefix: pf-c-list
 ### With large icons
 
 ```html
-<ul class="pf-c-list pf-m-plain pf-m-icon-lg">
+<ul class="pf-c-list pf-m-plain pf-m-icon-lg" role="list">
   <li class="pf-c-list__item">
     <span class="pf-c-list__item-icon">
       <i class="fas fa-book-open fa-fw" aria-hidden="true"></i>
@@ -163,10 +163,10 @@ Non-inline lists can be nested up to any level.
 
 ### Usage
 
-| Class            | Applied to   | Outcome                                         |
-| ---------------- | ------------ | ----------------------------------------------- |
-| `.pf-c-list`     | `<ul>, <ol>` | Initiates a list. **Required**                  |
-| `.pf-m-inline`   | `.pf-c-list` | Displays list items inline.                     |
-| `.pf-m-plain`    | `.pf-c-list` | Removes the list marker and base indentation.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-list` | `<ul>, <ol>` | Initiates a list. **Required**  |
+| `.pf-m-inline` | `.pf-c-list` | Displays list items inline. |
+| `.pf-m-plain` | `.pf-c-list` |  Removes the list marker and base indentation. |
 | `.pf-m-bordered` | `.pf-c-list` | Add horizontal divider between items in a list. |
-| `.pf-m-icon-lg`  | `.pf-c-list` | Show all the icons or logos in the list large.  |
+| `.pf-m-icon-lg` | `.pf-c-list` | Show all the icons or logos in the list large. |