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

package/docs/components/FormControl/examples/FormControl.md

@@ -498,26 +498,26 @@ cssPrefix: pf-c-form-control
 
 ### Accessibility
 
-| Attribute                       | Applied to                         | Outcome                                                                                                                                                          |
-| ------------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                            | `.pf-c-form-control`               | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element. |
-| `aria-invalid="true"`           | `.pf-c-form-control`               | Indicates that the form control is in the error state and applies error state styling.                                                                           |
-| `aria-label="descriptive text"` | `.pf-c-form-control`               | Provides an accessible label for assistive technology.                                                                                                           |
-| `aria-expanded="true"`          | `.pf-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded.                                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `id` | `.pf-c-form-control` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
+| `aria-invalid="true"` | `.pf-c-form-control` | Indicates that the form control is in the error state and applies error state styling. |
+| `aria-label="descriptive text"` | `.pf-c-form-control` | Provides an accessible label for assistive technology. |
+| `aria-expanded="true"` | `.pf-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded. |
 
 ### Usage
 
-| Class                     | Applied to                                                                  | Outcome                                                                                                                                                                                     |
-| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-form-control`      | `<input>`,`<textarea>`, `<select>`                                          | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required**        |
-| `.pf-m-resize-vertical`   | `textarea.pf-m-form-control`                                                | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis.                                                                                      |
-| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control`                                                | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis.                                                                                    |
-| `.pf-m-success`           | `.pf-c-form-control`                                                        | Modifies a form control for the success state.                                                                                                                                              |
-| `.pf-m-warning`           | `.pf-c-form-control`                                                        | Modifies a form control for the warning state.                                                                                                                                              |
-| `.pf-m-icon-sprite`       | `.pf-c-form-control`                                                        | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs.       |
-| `.pf-m-icon`              | `input.pf-c-form-control`                                                   | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
-| `.pf-m-calendar`          | `.pf-c-form-control.pf-m-icon`                                              | Modifies a form control to support the calendar icon.                                                                                                                                       |
-| `.pf-m-clock`             | `.pf-c-form-control.pf-m-icon`                                              | Modifies a form control to support the clock icon.                                                                                                                                          |
-| `.pf-m-expanded`          | `input.pf-c-form-control`                                                   | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed.                                                                 |
-| `.pf-m-placeholder`       | `select.pf-c-form-control`                                                  | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option.                                                                             |
-| `.pf-m-plain`             | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text.                                                                                           |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` |  Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required**  |
+| `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
+| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
+| `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
+| `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
+| `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
+| `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties.
+| `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
+| `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
+| `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
+| `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
+| `.pf-m-plain` | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |

package/docs/components/HelperText/examples/HelperText.md

@@ -163,7 +163,7 @@ cssPrefix: pf-c-helper-text
 ### Dynamic list
 
 ```html
-<ul class="pf-c-helper-text">
+<ul class="pf-c-helper-text" role="list">
   <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
@@ -192,14 +192,14 @@ cssPrefix: pf-c-helper-text
 
 ### Usage
 
-| Class                          | Applied to                | Outcome                                                                                                                                  |
-| ------------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-helper-text`            | `<div>`, `<ul>`           | Initiates the helper text component. **Required**                                                                                        |
-| `.pf-c-helper-text__item`      | `<div>`, `<li>`           | Initiates a helper text item. **Required**                                                                                               |
-| `.pf-c-helper-text__item-icon` | `<span>`                  | Initiates a helper text item icon. **Required when used in `.pf-c-helper-text__item.pf-m-dynamic`**                                      |
-| `.pf-c-helper-text__item-text` | `<span>`                  | Initiates a helper text item text. **Required**                                                                                          |
-| `.pf-m-dynamic`                | `.pf-c-helper-text__item` | Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
-| `.pf-m-indeterminate`          | `.pf-c-helper-text__item` | Modifies a helper text item for indeterminate state styles.                                                                              |
-| `.pf-m-warning`                | `.pf-c-helper-text__item` | Modifies a helper text item for warning state styles.                                                                                    |
-| `.pf-m-success`                | `.pf-c-helper-text__item` | Modifies a helper text item for success state styles.                                                                                    |
-| `.pf-m-error`                  | `.pf-c-helper-text__item` | Modifies a helper text item for error state styles.                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-helper-text` | `<div>`, `<ul>` |  Initiates the helper text component. **Required** |
+| `.pf-c-helper-text__item` | `<div>`, `<li>` |  Initiates a helper text item. **Required** |
+| `.pf-c-helper-text__item-icon` | `<span>` |  Initiates a helper text item icon. **Required when used in `.pf-c-helper-text__item.pf-m-dynamic`** |
+| `.pf-c-helper-text__item-text` | `<span>` |  Initiates a helper text item text. **Required** |
+| `.pf-m-dynamic` | `.pf-c-helper-text__item` |  Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
+| `.pf-m-indeterminate` | `.pf-c-helper-text__item` |  Modifies a helper text item for indeterminate state styles. |
+| `.pf-m-warning` | `.pf-c-helper-text__item` |  Modifies a helper text item for warning state styles. |
+| `.pf-m-success` | `.pf-c-helper-text__item` |  Modifies a helper text item for success state styles. |
+| `.pf-m-error` | `.pf-c-helper-text__item` |  Modifies a helper text item for error state styles. |

package/docs/components/Hint/examples/Hint.md

@@ -193,10 +193,10 @@ cssPrefix: pf-c-hint
 
 ### Usage
 
-| Class                 | Applied to | Outcome                                    |
-| --------------------- | ---------- | ------------------------------------------ |
-| `.pf-c-hint`          | `<div>`    | Initiates the hint component. **Required** |
-| `.pf-c-hint__title`   | `<div>`    | Initiates the hint title element.          |
-| `.pf-c-hint__body`    | `<div>`    | Initiates the hint body element.           |
-| `.pf-c-hint__footer`  | `<div>`    | Initiates the hint footer element.         |
-| `.pf-c-hint__actions` | `<div>`    | Initiates the hint actions element.        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-hint` | `<div>` | Initiates the hint component. **Required** |
+| `.pf-c-hint__title` | `<div>` | Initiates the hint title element. |
+| `.pf-c-hint__body` | `<div>` | Initiates the hint body element. |
+| `.pf-c-hint__footer` | `<div>` | Initiates the hint footer element. |
+| `.pf-c-hint__actions` | `<div>` | Initiates the hint actions element. |

package/docs/components/Icon/examples/Icon.md

@@ -243,13 +243,13 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
 
 ### Usage
 
-| Class                                                                           | Applied to                                   | Outcome                                                                                              |
-| ------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `.pf-c-icon`                                                                    | `<span>`, `<div>`                            | Initiates an icon component. **Required**                                                            |
-| `.pf-c-icon__content`                                                           | `<span>`, `<div>`                            | Initiates the icon content. **Required**                                                             |
-| `.pf-c-icon__progress`                                                          | `<span>`, `<div>`                            | Initiates a container for a progress spinner.                                                        |
-| `.pf-m-inline`                                                                  | `.pf-c-icon`                                 | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
-| `.pf-m-[sm,md,lg,xl]`                                                           | `.pf-c-icon`                                 | Modifies the icon container to be small, medium, large, or extra large.                              |
-| `.pf-m-[sm,md,lg,xl]`                                                           | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large.            |
-| `.pf-m-in-progress`                                                             | `.pf-c-icon`                                 | Shows the progress element in place of the icon content.                                             |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default` | `.pf-c-icon__content`                        | Modifies the icon content to use a status color.                                                     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required**  |
+| `.pf-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required**  |
+| `.pf-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner.  |
+| `.pf-m-inline` | `.pf-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
+| `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
+| `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
+| `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -830,34 +830,34 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
 
 All accessibility requirements for inputs apply to elements within inline edit.
 
-| Attribute                                                  | Applied to                           | Outcome                                                            |
-| ---------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
-| `id`                                                       | `[labelling element]`                | Provides a reference for toggle button and/or editable content.    |
-| `aria-label="descriptive text"`                            | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
+| `aria-label="descriptive text"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
 | `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
-| `aria-label="descriptive text"`                            | `[radio button group]`               | Provides an accessible description for radio groups. **Required**  |
-| `contenteditable="true"`                                   | `.pf-c-inline-edit__editable-text`   | Ensures the text node is editable.                                 |
-| `role="textbox"`                                           | `.pf-c-inline-edit__editable-text`   | Identifies an element that allows the input of free-form text.     |
-| `role="radiogroup"`                                        | `[radio button group]`               | Provides an accessible role for radio buttons groups. **Required** |
+| `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
+| `contenteditable="true"` | `.pf-c-inline-edit__editable-text` | Ensures the text node is editable. |
+| `role="textbox"` | `.pf-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
+| `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |
 
 ### Usage
 
-| Class                              | Applied to                                                     | Outcome                                                                                   |
-| ---------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `.pf-c-inline-edit`                | `<form>`, `<div>`                                              | Initiates the inline edit component. **Required**                                         |
-| `.pf-c-inline-edit__value`         | `*`                                                            | Initiates an inline edit value. **Required**                                              |
-| `.pf-c-inline-edit__input`         | `*`                                                            | Initiates an inline edit input. **Required**                                              |
-| `.pf-c-inline-edit__editable-text` | `*`                                                            | Initiates an inline editable text element.                                                |
-| `.pf-c-inline-edit__label`         | `*`                                                            | Initiates an inline edit label.                                                           |
-| `.pf-c-inline-edit__action`        | `*`                                                            | Initiates an inline edit action (visible when inline edit region is active). **Required** |
-| `.pf-m-inline-editable`            | `.pf-c-inline-edit`, `.pf-c-inline-edit [block level element]` | Modifies an inline edit region for editable state.                                        |
-| `.pf-m-action-group`               | `.pf-c-inline-edit__group`                                     | Modifies group for action group.                                                          |
-| `.pf-m-icon-group`                 | `.pf-c-inline-edit__group`                                     | Modifies an action group item spacing.                                                    |
-| `.pf-m-column`                     | `.pf-c-inline-edit__group`                                     | Modifies an action group flex direction.                                                  |
-| `.pf-m-footer`                     | `.pf-c-inline-edit__group`                                     | Modifies an inline edit group margin-top.                                                 |
-| `.pf-m-bold`                       | `.pf-c-inline-edit__label`                                     | Modifies an inline edit label's `font-weight`.                                            |
-| `.pf-m-valid`                      | `.pf-c-inline-edit__action`                                    | Modifies the action button state.                                                         |
-| `.pf-m-enable-editable`            | `.pf-c-inline-edit__action`                                    | Exposes an inline edit action by default.                                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
+| `.pf-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
+| `.pf-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
+| `.pf-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
+| `.pf-c-inline-edit__label` | `*` | Initiates an inline edit label. |
+| `.pf-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
+| `.pf-m-inline-editable` | `.pf-c-inline-edit`, `.pf-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
+| `.pf-m-action-group` | `.pf-c-inline-edit__group` | Modifies group for action group. |
+| `.pf-m-icon-group` | `.pf-c-inline-edit__group` | Modifies an action group item spacing. |
+| `.pf-m-column` | `.pf-c-inline-edit__group` | Modifies an action group flex direction. |
+| `.pf-m-footer` | `.pf-c-inline-edit__group` | Modifies an inline edit group margin-top. |
+| `.pf-m-bold` | `.pf-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
+| `.pf-m-valid` | `.pf-c-inline-edit__action` | Modifies the action button state. |
+| `.pf-m-enable-editable` | `.pf-c-inline-edit__action` | Exposes an inline edit action by default. |
 
 <!--
 ### Bulk edit dl (default)
@@ -931,9 +931,11 @@ All accessibility requirements for inputs apply to elements within inline edit.
     <dt>Tags</dt>
     <dd>
       {{#> chip chip--type="div" chip--modifier="pf-m-read-only"}}
-        {{#> chip-text}}
-          alertmanager=main
-        {{/chip-text}}
+        {{#> chip-content}}
+          {{#> chip-text}}
+            alertmanager=main
+          {{/chip-text}}
+        {{/chip-content}}
       {{/chip}}
     </dd>
   </div>

package/docs/components/InputGroup/examples/InputGroup.md

@@ -221,16 +221,16 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 When using the `.pf-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
 
-| Attribute          | Applied to           | Outcome                                                                                                  |
-| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------- |
-| `aria-describedby` | `.pf-c-form-control` | When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-describedby` | `.pf-c-form-control` |  When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
 
 ### Usage
 
-| Class                     | Applied to                | Outcome                                                                                      |
-| ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------- |
-| `.pf-c-input-group`       | `<div>`                   | Initiates the input group. **Required**                                                      |
-| `.pf-c-input-group__text` | `<span>`                  | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
-| `.pf-m-plain`             | `.pf-c-input-group`       | Removes the background from the input group.                                                 |
-| `.pf-m-plain`             | `.pf-c-input-group__text` | Removes the border from the text element.                                                    |
-| `.pf-m-disabled`          | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group.                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-input-group` | `<div>` |  Initiates the input group. **Required** |
+| `.pf-c-input-group__text` | `<span>` |  Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
+| `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
+| `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
+| `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |

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