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

package/docs/components/Progress/examples/Progress.md

@@ -315,10 +315,6 @@ cssPrefix: pf-c-progress
   class="pf-c-progress pf-m-outside pf-m-lg"
   id="progress-outside-static-width-example"
 >
-  <div
-    class="pf-c-progress__description"
-    id="progress-outside-static-width-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure pf-m-static-width">1%</span>
   </div>
@@ -339,10 +335,6 @@ cssPrefix: pf-c-progress
   class="pf-c-progress pf-m-outside pf-m-lg"
   id="progress-outside-static-width-2-example"
 >
-  <div
-    class="pf-c-progress__description"
-    id="progress-outside-static-width-2-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure pf-m-static-width">50%</span>
   </div>
@@ -363,10 +355,6 @@ cssPrefix: pf-c-progress
   class="pf-c-progress pf-m-outside pf-m-lg"
   id="progress-outside-static-width-3-example"
 >
-  <div
-    class="pf-c-progress__description"
-    id="progress-outside-static-width-3-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure pf-m-static-width">100%</span>
   </div>
@@ -389,10 +377,6 @@ cssPrefix: pf-c-progress
   id="progress-outside-static-width-4-example"
   style="--pf-c-progress__measure--m-static-width--MinWidth: 6ch;"
 >
-  <div
-    class="pf-c-progress__description"
-    id="progress-outside-static-width-4-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure pf-m-static-width">1,000</span>
   </div>
@@ -414,10 +398,6 @@ cssPrefix: pf-c-progress
   id="progress-outside-static-width-5-example"
   style="--pf-c-progress__measure--m-static-width--MinWidth: 6ch;"
 >
-  <div
-    class="pf-c-progress__description"
-    id="progress-outside-static-width-5-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure pf-m-static-width">50,000</span>
   </div>
@@ -439,10 +419,6 @@ cssPrefix: pf-c-progress
   id="progress-outside-static-width-6-example"
   style="--pf-c-progress__measure--m-static-width--MinWidth: 6ch;"
 >
-  <div
-    class="pf-c-progress__description"
-    id="progress-outside-static-width-6-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure pf-m-static-width">100,000</span>
   </div>
@@ -464,10 +440,6 @@ cssPrefix: pf-c-progress
 
 ```html
 <div class="pf-c-progress pf-m-singleline" id="progress-singleline-example">
-  <div
-    class="pf-c-progress__description"
-    id="progress-singleline-example-description"
-  ></div>
   <div class="pf-c-progress__status" aria-hidden="true">
     <span class="pf-c-progress__measure">33%</span>
   </div>
@@ -493,7 +465,6 @@ cssPrefix: pf-c-progress
     class="pf-c-progress__description"
     id="progress-no-measure-example-description"
   >Title</div>
-  <div class="pf-c-progress__status" aria-hidden="true"></div>
   <div
     class="pf-c-progress__bar"
     role="progressbar"
@@ -656,37 +627,37 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
 
 If this component is describing the loading progress of a particular region of a page, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
 
-| Attribute                                                        | Applied to               | Outcome                                                                                                                                                                                                                                                                                                                                                                    |
-| ---------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="progressbar"`                                             | `.pf-c-progress__bar`    | This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps.                                                                                                                                                                                                                                         |
-| `aria-valuenow=""`                                               | `.pf-c-progress__bar`    | This value needs to be updated as progress continues.                                                                                                                                                                                                                                                                                                                      |
-| `aria-valuemin="0"`                                              | `.pf-c-progress__bar`    | The minimum value for the progress bar.                                                                                                                                                                                                                                                                                                                                    |
-| `aria-valuemax="100"`                                            | `.pf-c-progress__bar`    | The maximum value for the progress bar. If the progress is only defined using `aria-valuenow` (e.g a percentage), the value should be set to "100". If the progress is defined using `aria-valuetext`, then this value can be a number other than 100. For example, if `aria-valuetext` is "2 of 5 units", then `aria-valuemax` can be "5" and `aria-valuenow` can be "2". |
-| `aria-label="[id of .pf-c-progress__description]"`               | `.pf-c-progress__bar`    | Provides an accessible name for the progress component.                                                                                                                                                                                                                                                                                                                    |
-| `aria-labelledby="[id element that labels the progress]"`        | `.pf-c-progress__bar`    | Provides an accessible name for the progress component.                                                                                                                                                                                                                                                                                                                    |
-| `aria-describedby="[id of element that describes the progress]"` | `.pf-c-progress__bar`    | Provides an accessible description for the progress component.                                                                                                                                                                                                                                                                                                             |
-| `aria-valuetext="[loading state]"`                               | `.pf-c-progress__bar`    | Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from `aria-valuenow` when `aria-valuetext` is used.                                        |
-| `aria-hidden="true"`                                             | `.pf-c-progress__status` | Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the `.pf-c-progress__bar` element.                                                                                                                                                                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="progressbar"` | `.pf-c-progress__bar` |  This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps. |
+| `aria-valuenow=""` | `.pf-c-progress__bar` |  This value needs to be updated as progress continues. |
+| `aria-valuemin="0"` | `.pf-c-progress__bar` |  The minimum value for the progress bar. |
+| `aria-valuemax="100"` | `.pf-c-progress__bar` |  The maximum value for the progress bar. If the progress is only defined using `aria-valuenow` (e.g a percentage), the value should be set to "100". If the progress is defined using `aria-valuetext`, then this value can be a number other than 100. For example, if `aria-valuetext` is "2 of 5 units", then `aria-valuemax` can be "5" and `aria-valuenow` can be "2". |
+| `aria-label="[id of .pf-c-progress__description]"` | `.pf-c-progress__bar` | Provides an accessible name for the progress component. |
+| `aria-labelledby="[id element that labels the progress]"` | `.pf-c-progress__bar` | Provides an accessible name for the progress component. |
+| `aria-describedby="[id of element that describes the progress]"` | `.pf-c-progress__bar` | Provides an accessible description for the progress component. |
+| `aria-valuetext="[loading state]"` | `.pf-c-progress__bar` |  Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from `aria-valuenow` when `aria-valuetext` is used. |
+| `aria-hidden="true"` | `.pf-c-progress__status` |  Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the `.pf-c-progress__bar` element. |
 
 ### Usage
 
-| Class                         | Applied to                                            | Outcome                                                                                                                                                       |
-| ----------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-progress`              | `<div>`                                               | Initiates a progress component.                                                                                                                               |
-| `.pf-c-progress__description` | `<div>`                                               | The description for a progress bar.                                                                                                                           |
-| `.pf-c-progress__status`      | `<div>`                                               | Displays the % of progress and status icons.                                                                                                                  |
-| `.pf-c-progress__measure`     | `<span>`                                              | Displays the % complete.                                                                                                                                      |
-| `.pf-c-progress__status-icon` | `<span>`                                              | Displays the status icon. (optional)                                                                                                                          |
-| `.pf-c-progress__bar`         | `<div>`                                               | Displays across the entire width and represents the completed state.                                                                                          |
-| `.pf-c-progress__indicator`   | `<div>`                                               | Displays with the `.pf-c-progress__bar` to indicate the progress so far.                                                                                      |
-| `.pf-c-progress__helper-text` | `<div>`                                               | Displays additional text below the progress bar. (optional)                                                                                                   |
-| `.pf-m-lg`                    | `.pf-c-progress`                                      | Modifies the progress bar to be larger.                                                                                                                       |
-| `.pf-m-sm`                    | `.pf-c-progress`                                      | Modifies the progress bar to be smaller.                                                                                                                      |
-| `.pf-m-inside`                | `.pf-c-progress`                                      | Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.                                                                       |
-| `.pf-m-outside`               | `.pf-c-progress`                                      | Shows the measure and status icon to the right of the progress bar.                                                                                           |
-| `.pf-m-singleline`            | `.pf-c-progress`                                      | Modifies the progress component to exist on one row. If a measure is needed, use with `.pf-m-inside` or `.pf-m-outside`                                       |
-| `.pf-m-success`               | `.pf-c-progress`                                      | Changes the appearance of the progess component to indicate a success state.                                                                                  |
-| `.pf-m-warning`               | `.pf-c-progress`                                      | Changes the appearance of the progess component to indicate a warning state.                                                                                  |
-| `.pf-m-danger`                | `.pf-c-progress`                                      | Changes the appearance of the progess component to indicate a danger (failure) state.                                                                         |
-| `.pf-m-truncate`              | `.pf-c-progress__description`                         | Modifies the description to display a single line and truncate any overflow text with ellipses.                                                               |
-| `.pf-m-static-width`          | `.pf-c-progress.pf-m-outside .pf-c-progress__measure` | Modifies the measure element to have a static `min-width` that will hold 0-100%. Overridable by setting `--pf-c-progress__measure--m-static-width--MinWidth`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-progress` | `<div>` |  Initiates a progress component. |
+| `.pf-c-progress__description` | `<div>` |  The description for a progress bar. |
+| `.pf-c-progress__status` | `<div>` |  Displays the % of progress and status icons. |
+| `.pf-c-progress__measure` | `<span>` |  Displays the % complete. |
+| `.pf-c-progress__status-icon` | `<span>` |  Displays the status icon. (optional) |
+| `.pf-c-progress__bar` | `<div>` |  Displays across the entire width and represents the completed state. |
+| `.pf-c-progress__indicator` | `<div>` |  Displays with the `.pf-c-progress__bar` to indicate the progress so far. |
+| `.pf-c-progress__helper-text` | `<div>` |  Displays additional text below the progress bar. (optional) |
+| `.pf-m-lg` | `.pf-c-progress` |  Modifies the progress bar to be larger. |
+| `.pf-m-sm` | `.pf-c-progress` |  Modifies the progress bar to be smaller. |
+| `.pf-m-inside` | `.pf-c-progress` |  Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.|
+| `.pf-m-outside` | `.pf-c-progress` |  Shows the measure and status icon to the right of the progress bar. |
+| `.pf-m-singleline` | `.pf-c-progress` | Modifies the progress component to exist on one row. If a measure is needed, use with `.pf-m-inside` or `.pf-m-outside`|
+| `.pf-m-success` | `.pf-c-progress` |  Changes the appearance of the progess component to indicate a success state. |
+| `.pf-m-warning` | `.pf-c-progress` |  Changes the appearance of the progess component to indicate a warning state. |
+| `.pf-m-danger` | `.pf-c-progress` |  Changes the appearance of the progess component to indicate a danger (failure) state. |
+| `.pf-m-truncate` | `.pf-c-progress__description` | Modifies the description to display a single line and truncate any overflow text with ellipses. |
+| `.pf-m-static-width` | `.pf-c-progress.pf-m-outside .pf-c-progress__measure` | Modifies the measure element to have a static `min-width` that will hold 0-100%. Overridable by setting `--pf-c-progress__measure--m-static-width--MinWidth`. |

package/docs/components/ProgressStepper/examples/ProgressStepper.md

@@ -8,7 +8,7 @@ cssPrefix: pf-c-progress-stepper
 ### Basic
 
 ```html
-<ol class="pf-c-progress-stepper">
+<ol class="pf-c-progress-stepper" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -53,7 +53,7 @@ cssPrefix: pf-c-progress-stepper
 ### Basic with descriptions
 
 ```html
-<ol class="pf-c-progress-stepper">
+<ol class="pf-c-progress-stepper" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -107,7 +107,10 @@ cssPrefix: pf-c-progress-stepper
 ### Vertical, horizontal responsive
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl">
+<ol
+  class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl"
+  role="list"
+>
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -161,7 +164,7 @@ cssPrefix: pf-c-progress-stepper
 ### Center aligned with descriptions
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-center">
+<ol class="pf-c-progress-stepper pf-m-center" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -215,7 +218,7 @@ cssPrefix: pf-c-progress-stepper
 ### Center aligned, vertical
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical">
+<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -269,7 +272,7 @@ cssPrefix: pf-c-progress-stepper
 ### Vertical with descriptions
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-vertical">
+<ol class="pf-c-progress-stepper pf-m-vertical" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -323,7 +326,7 @@ cssPrefix: pf-c-progress-stepper
 ### Compact
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-compact">
+<ol class="pf-c-progress-stepper pf-m-compact" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -377,7 +380,7 @@ cssPrefix: pf-c-progress-stepper
 ### Compact, vertical
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-vertical pf-m-compact">
+<ol class="pf-c-progress-stepper pf-m-vertical pf-m-compact" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -433,6 +436,7 @@ cssPrefix: pf-c-progress-stepper
 ```html
 <ol
   class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-xl pf-m-compact"
+  role="list"
 >
   <li
     class="pf-c-progress-stepper__step pf-m-success"
@@ -487,7 +491,10 @@ cssPrefix: pf-c-progress-stepper
 ### Compact, vertical, centered
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact">
+<ol
+  class="pf-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact"
+  role="list"
+>
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -541,7 +548,7 @@ cssPrefix: pf-c-progress-stepper
 ### Compact, centered
 
 ```html
-<ol class="pf-c-progress-stepper pf-m-center pf-m-compact">
+<ol class="pf-c-progress-stepper pf-m-center pf-m-compact" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -595,7 +602,7 @@ cssPrefix: pf-c-progress-stepper
 ### Basic with an issue
 
 ```html
-<ol class="pf-c-progress-stepper">
+<ol class="pf-c-progress-stepper" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -666,7 +673,7 @@ cssPrefix: pf-c-progress-stepper
 ### Basic with a failure
 
 ```html
-<ol class="pf-c-progress-stepper">
+<ol class="pf-c-progress-stepper" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -737,7 +744,7 @@ cssPrefix: pf-c-progress-stepper
 ### Basic with Patternfly icons
 
 ```html
-<ol class="pf-c-progress-stepper">
+<ol class="pf-c-progress-stepper" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -784,7 +791,7 @@ cssPrefix: pf-c-progress-stepper
 ### With help text
 
 ```html
-<ol class="pf-c-progress-stepper">
+<ol class="pf-c-progress-stepper" role="list">
   <li
     class="pf-c-progress-stepper__step pf-m-success"
     aria-label="completed step,"
@@ -860,30 +867,30 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
 
 ### Accessibility
 
-| Attribute                          | Applied to                              | Outcome                                             |
-| ---------------------------------- | --------------------------------------- | --------------------------------------------------- |
-| `aria-label="[State of the step]"` | `.pf-c-progress-stepper__step`          | Provides an accessible label for the step.          |
-| `aria-hidden="true"`               | `.pf-c-progress-stepper__step-icon <i>` | Hides icon for assistive technologies. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[State of the step]"` | `.pf-c-progress-stepper__step` |  Provides an accessible label for the step. |
+| `aria-hidden="true"` | `.pf-c-progress-stepper__step-icon <i>` |  Hides icon for assistive technologies. **Required** |
 
 ### Usage
 
-| Class                                 | Applied to                           | Outcome                                                                                                                                                            |
-| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-progress-stepper`              | `<ol>`                               | Applies default progress stepper styling. **Required**                                                                                                             |
-| `.pf-c-progress-stepper__step`        | `<li>`                               | Defines each step of the progress stepper. **Required**                                                                                                            |
-| `.progress-stepper__step-connector`   | `<div>`                              | Creates the connecting line between steps **Required**                                                                                                             |
-| `.progress-stepper__step-icon`        | `<span>`                             | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
-| `.progress-stepper__step-main`        | `<div>`                              | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required**                         |
-| `.progress-stepper__step-title`       | `<div>`, `<button>`                  | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text.            |
-| `.progress-stepper__step-description` | `<div>`                              | Contains the description of the step.                                                                                                                              |
-| `.pf-m-center`                        | `.pf-c-progress-stepper`             | Modifies to center each step.                                                                                                                                      |
-| `.pf-m-vertical{-on-[breakpoint]}`    | `.pf-c-progress-stepper`             | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).             |
-| `.pf-m-horizontal{-on-[breakpoint]}`  | `.pf-c-progress-stepper`             | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).           |
-| `.pf-m-compact`                       | `.pf-c-progress-stepper`             | Modifies for compact styling.                                                                                                                                      |
-| `.pf-m-success`                       | `.pf-c-progress-stepper__step`       | Modifies for success styling.                                                                                                                                      |
-| `.pf-m-warning`                       | `.pf-c-progress-stepper__step`       | Modifies for warning styling.                                                                                                                                      |
-| `.pf-m-danger`                        | `.pf-c-progress-stepper__step`       | Modifies for danger styling.                                                                                                                                       |
-| `.pf-m-info`                          | `.pf-c-progress-stepper__step`       | Modifies for info styling.                                                                                                                                         |
-| `.pf-m-current`                       | `.pf-c-progress-stepper__step`       | Modifies styling for the current step.                                                                                                                             |
-| `.pf-m-pending`                       | `.pf-c-progress-stepper__step`       | Modifies styling for pending steps.                                                                                                                                |
-| `.pf-m-help-text`                     | `.pf-c-progress-stepper__step-title` | Modifies styling for steps that have help text.                                                                                                                    |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-progress-stepper` | `<ol>` | Applies default progress stepper styling. **Required** |
+| `.pf-c-progress-stepper__step` | `<li>` | Defines each step of the progress stepper. **Required** |
+| `.progress-stepper__step-connector` | `<div>` | Creates the connecting line between steps **Required** |
+| `.progress-stepper__step-icon` | `<span>` | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
+| `.progress-stepper__step-main` | `<div>` | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required** |
+| `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
+| `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
+| `.pf-m-center`| `.pf-c-progress-stepper` | Modifies to center each step. |
+| `.pf-m-vertical{-on-[breakpoint]}`| `.pf-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-compact`| `.pf-c-progress-stepper` | Modifies for compact styling. |
+| `.pf-m-success`| `.pf-c-progress-stepper__step` | Modifies for success styling. |
+| `.pf-m-warning`| `.pf-c-progress-stepper__step` | Modifies for warning styling. |
+| `.pf-m-danger`| `.pf-c-progress-stepper__step` | Modifies for danger styling. |
+| `.pf-m-info`| `.pf-c-progress-stepper__step` | Modifies for info styling. |
+| `.pf-m-current`| `.pf-c-progress-stepper__step` | Modifies styling for the current step. |
+| `.pf-m-pending`| `.pf-c-progress-stepper__step` | Modifies styling for pending steps. |
+| `.pf-m-help-text`| `.pf-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |

package/docs/components/Radio/examples/Radio.md

@@ -195,18 +195,18 @@ If you extend this component or modify the styles of this component, then make s
 
 ### Accessibility
 
-| Attribute  | Applied to             | Outcome                                                                                                           |
-| ---------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `disabled` | `<input type="radio">` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
 
 ### Usage
 
-| Class                      | Applied to             | Outcome                                                                                                            |
-| -------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-radio`              | `<div>`, `<label>`     | Initiates the radio component. **Required**                                                                        |
-| `.pf-c-radio__input`       | `<input type="radio">` | Initiates a radio input. **Required**                                                                              |
-| `.pf-c-radio__label`       | `<label>`, `<span>`    | Initiates a label. **Required**                                                                                    |
-| `.pf-c-radio__description` | `<span>`               | Initiates a radio description.                                                                                     |
-| `.pf-c-radio__body`        | `<span>`               | Initiates a radio body.                                                                                            |
-| `.pf-m-standalone`         | `.pf-c-radio`          | Modifies the radio component for use with a standalone `<input type="radio">`. **Required when there is no label** |
-| `.pf-m-disabled`           | `.pf-c-radio__label`   | Modifies the radio component for the disabled state. **Required when input is disabled**                           |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-radio` | `<div>`, `<label>` |  Initiates the radio component. **Required**  |
+| `.pf-c-radio__input` | `<input type="radio">` |  Initiates a radio input. **Required**  |
+| `.pf-c-radio__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-c-radio__description` | `<span>` | Initiates a radio description. |
+| `.pf-c-radio__body` | `<span>` | Initiates a radio body. |
+| `.pf-m-standalone` | `.pf-c-radio` |  Modifies the radio component for use with a standalone `<input type="radio">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-c-radio__label` |  Modifies the radio component for the disabled state. **Required when input is disabled** |

package/docs/components/SearchInput/examples/SearchInput.md

@@ -581,40 +581,40 @@ cssPrefix: pf-c-search-input
 
 ### Accessibility
 
-| Attributes                             | Applied to                                 | Outcome                                                                                                                    |
-| -------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
-| `aria-hidden="true"`                   | `.pf-c-search-input__icon > *`             | Hides the search icon from assistive technologies. **Required**                                                            |
-| `aria-label="Previous"`                | `.pf-c-search-input__nav > .pf-c-button`   | Provides an accessible label for the previous nav button. **Required**                                                     |
-| `aria-label="Next"`                    | `.pf-c-search-input__nav > .pf-c-button`   | Provides an accessible label for the next nav button. **Required**                                                         |
-| `aria-label="[descriptive text]"`      | `.pf-c-search-input__text-input`           | Provides an accessible label for the search input. **Required**                                                            |
-| `aria-label="Clear"`                   | `.pf-c-search-input__clear > .pf-c-button` | Provides an accessible label for the clear button. **Required**                                                            |
-| `aria-label="Search"`                  | `.pf-c-button`                             | Provides an accessible label for the search button. **Required**                                                           |
-| `aria-label="Advanced search"`         | `.pf-c-button`                             | Provides an accessible label for the advanced search toggle. **Required**                                                  |
-| `aria-expanded="[true/false]"`         | `.pf-c-button`                             | Indicates whether the advanced search menu is expanded or collapsed. **Required**                                          |
-| `id`                                   | `.pf-c-search-input__text-input`           | Assigns an ID that is used with `aria-labelledby` on `.pf-c-search-input__menu-list`. **Required when using autocomplete** |
-| `aria-labelledby="[id of text input]"` | `.pf-c-search-input__menu-list`            | Gives the menu list an accessible label. **Required when using autocomplete**                                              |
-| `disabled`                             | `.pf-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text**                 |
-| `aria-hidden="true"`                   | `.pf-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text**                                     |
+| Attributes | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-c-search-input__icon > *` | Hides the search icon from assistive technologies. **Required** |
+| `aria-label="Previous"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the previous nav button. **Required** |
+| `aria-label="Next"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the next nav button. **Required** |
+| `aria-label="[descriptive text]"` | `.pf-c-search-input__text-input` | Provides an accessible label for the search input. **Required** |
+| `aria-label="Clear"` | `.pf-c-search-input__clear > .pf-c-button` | Provides an accessible label for the clear button. **Required** |
+| `aria-label="Search"` | `.pf-c-button` | Provides an accessible label for the search button. **Required** |
+| `aria-label="Advanced search"` | `.pf-c-button` | Provides an accessible label for the advanced search toggle. **Required** |
+| `aria-expanded="[true/false]"` | `.pf-c-button` | Indicates whether the advanced search menu is expanded or collapsed. **Required** |
+| `id` | `.pf-c-search-input__text-input` | Assigns an ID that is used with `aria-labelledby` on `.pf-c-search-input__menu-list`. **Required when using autocomplete** |
+| `aria-labelledby="[id of text input]"` | `.pf-c-search-input__menu-list` | Gives the menu list an accessible label. **Required when using autocomplete** |
+| `disabled` | `.pf-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text** |
+| `aria-hidden="true"` | `.pf-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text** |
 
 ### Usage
 
-| Class                                | Applied to                       | Outcome                                                                                   |
-| ------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------- |
-| `.pf-c-search-input`                 | `<div>`                          | Initiates the custom search input component. **Required**                                 |
-| `.pf-c-search-input__bar`            | `<div>`                          | Initiates the custom search input bar. **Required**                                       |
-| `.pf-c-search-input__text`           | `<span>`                         | Initiates the text area. **Required**                                                     |
-| `.pf-c-search-input__text-input`     | `<input>`                        | Initiates the search input. **Required**                                                  |
-| `.pf-c-search-input__icon`           | `<span>`                         | Initiates the search icon container. **Required**                                         |
-| `.pf-c-search-input__utilities`      | `<span>`                         | Initiates the utilities area beside the search input.                                     |
-| `.pf-c-search-input__count`          | `<span>`                         | Initiates the item count container.                                                       |
-| `.pf-c-search-input__nav`            | `<span>`                         | Initiates the navigable buttons container.                                                |
-| `.pf-c-search-input__clear`          | `<span>`                         | Initiates the clear button container. **Required when there is text in the search input** |
-| `.pf-c-search-input__menu`           | `<div>`                          | Initiates the search input dropdown menu.                                                 |
-| `.pf-c-search-input__menu-body`      | `<div>`                          | Initiates the search input dropdown menu body element.                                    |
-| `.pf-c-search-input__menu-list`      | `<div>`                          | Initiates the search input dropdown menu list.                                            |
-| `.pf-c-search-input__menu-list-item` | `<div>`                          | Initiates the search input dropdown menu list item.                                       |
-| `.pf-c-search-input__menu-item`      | `<div>`                          | Initiates the search input dropdown menu item.                                            |
-| `.pf-c-search-input__menu-item-text` | `<span>`                         | Initiates the search input dropdown menu item text.                                       |
-| `.pf-m-top`                          | `.pf-c-search-input__menu`       | Modifies the menu to display above the toggle.                                            |
-| `.pf-m-static`                       | `.pf-c-search-input__menu`       | Modifies the menu to be statically positioned to support custom positioning.              |
-| `.pf-m-hint`                         | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles.                                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-search-input` | `<div>` | Initiates the custom search input component. **Required** |
+| `.pf-c-search-input__bar` | `<div>` | Initiates the custom search input bar. **Required** |
+| `.pf-c-search-input__text` | `<span>` | Initiates the text area. **Required** |
+| `.pf-c-search-input__text-input` | `<input>` | Initiates the search input. **Required** |
+| `.pf-c-search-input__icon` | `<span>` | Initiates the search icon container. **Required** |
+| `.pf-c-search-input__utilities` | `<span>` | Initiates the utilities area beside the search input. |
+| `.pf-c-search-input__count` | `<span>` | Initiates the item count container. |
+| `.pf-c-search-input__nav` | `<span>` | Initiates the navigable buttons container. |
+| `.pf-c-search-input__clear` | `<span>` | Initiates the clear button container. **Required when there is text in the search input** |
+| `.pf-c-search-input__menu` | `<div>` | Initiates the search input dropdown menu. |
+| `.pf-c-search-input__menu-body` | `<div>` | Initiates the search input dropdown menu body element. |
+| `.pf-c-search-input__menu-list` | `<div>` | Initiates the search input dropdown menu list. |
+| `.pf-c-search-input__menu-list-item` | `<div>` | Initiates the search input dropdown menu list item. |
+| `.pf-c-search-input__menu-item` | `<div>` | Initiates the search input dropdown menu item. |
+| `.pf-c-search-input__menu-item-text` | `<span>` | Initiates the search input dropdown menu item text. |
+| `.pf-m-top` | `.pf-c-search-input__menu` | Modifies the menu to display above the toggle. |
+| `.pf-m-static` | `.pf-c-search-input__menu` | Modifies the menu to be statically positioned to support custom positioning. |
+| `.pf-m-hint` | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles. |