@patternfly/patternfly 5.1.0 → 5.2.0-prerelease.2

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -275,14 +275,18 @@ cssPrefix: pf-v5-c-menu-toggle
 
 ```html
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-disabled-example-check"
+    for="split-button-checkbox-disabled-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-disabled-example-check-input"
+      name="split-button-checkbox-disabled-example-check-input"
+      aria-label="Standalone check"
       disabled
-      id="split-button-checkbox-disabled-example-input"
-      name="split-button-checkbox-disabled-example-input"
-      aria-label="Standalone input"
     />
   </label>
   <button
@@ -302,13 +306,17 @@ cssPrefix: pf-v5-c-menu-toggle
 </div>
 &nbsp;
 <div class="pf-v5-c-menu-toggle pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-example-check"
+    for="split-button-checkbox-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-example-input"
-      name="split-button-checkbox-example-input"
-      aria-label="Standalone input"
+      id="split-button-checkbox-example-check-input"
+      name="split-button-checkbox-example-check-input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -327,13 +335,17 @@ cssPrefix: pf-v5-c-menu-toggle
 </div>
 &nbsp;
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
-  <label class="pf-v5-c-check pf-m-standalone">
+  <label
+    class="pf-v5-c-check pf-m-standalone"
+    id="split-button-checkbox-expanded-example-check"
+    for="split-button-checkbox-expanded-example-check-input"
+  >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-expanded-example-input"
-      name="split-button-checkbox-expanded-example-input"
-      aria-label="Standalone input"
+      id="split-button-checkbox-expanded-example-check-input"
+      name="split-button-checkbox-expanded-example-check-input"
+      aria-label="Standalone check"
     />
   </label>
   <button
@@ -359,14 +371,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-disabled-example-input"
+    id="split-button-checkbox-with-toggle-text-disabled-example-check"
+    for="split-button-checkbox-with-toggle-text-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-with-toggle-text-disabled-example-check-input"
+      name="split-button-checkbox-with-toggle-text-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-with-toggle-text-disabled-example-input"
-      name="split-button-checkbox-with-toggle-text-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -389,13 +402,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-example-input"
+    id="split-button-checkbox-with-toggle-text-example-check"
+    for="split-button-checkbox-with-toggle-text-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-with-toggle-text-example-input"
-      name="split-button-checkbox-with-toggle-text-example-input"
+      id="split-button-checkbox-with-toggle-text-example-check-input"
+      name="split-button-checkbox-with-toggle-text-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -417,13 +431,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-with-toggle-text-expanded-example-input"
+    id="split-button-checkbox-with-toggle-text-expanded-example-check"
+    for="split-button-checkbox-with-toggle-text-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-with-toggle-text-expanded-example-input"
-      name="split-button-checkbox-with-toggle-text-expanded-example-input"
+      id="split-button-checkbox-with-toggle-text-expanded-example-check-input"
+      name="split-button-checkbox-with-toggle-text-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -450,14 +465,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-disabled-example-input"
+    id="split-button-checkbox-primary-disabled-example-check"
+    for="split-button-checkbox-primary-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-primary-disabled-example-check-input"
+      name="split-button-checkbox-primary-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-primary-disabled-example-input"
-      name="split-button-checkbox-primary-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -480,13 +496,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-example-input"
+    id="split-button-checkbox-primary-example-check"
+    for="split-button-checkbox-primary-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-primary-example-input"
-      name="split-button-checkbox-primary-example-input"
+      id="split-button-checkbox-primary-example-check-input"
+      name="split-button-checkbox-primary-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -508,13 +525,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-primary-expanded-example-input"
+    id="split-button-checkbox-primary-expanded-example-check"
+    for="split-button-checkbox-primary-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-primary-expanded-example-input"
-      name="split-button-checkbox-primary-expanded-example-input"
+      id="split-button-checkbox-primary-expanded-example-check-input"
+      name="split-button-checkbox-primary-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -541,14 +559,15 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-disabled-example-input"
+    id="split-button-checkbox-secondary-disabled-example-check"
+    for="split-button-checkbox-secondary-disabled-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
+      id="split-button-checkbox-secondary-disabled-example-check-input"
+      name="split-button-checkbox-secondary-disabled-example-check-input"
       disabled
-      id="split-button-checkbox-secondary-disabled-example-input"
-      name="split-button-checkbox-secondary-disabled-example-input"
     />
     <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -571,13 +590,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-example-input"
+    id="split-button-checkbox-secondary-example-check"
+    for="split-button-checkbox-secondary-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-example-input"
-      name="split-button-checkbox-secondary-example-input"
+      id="split-button-checkbox-secondary-example-check-input"
+      name="split-button-checkbox-secondary-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>
@@ -599,13 +619,14 @@ cssPrefix: pf-v5-c-menu-toggle
 <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
   <label
     class="pf-v5-c-check"
-    for="split-button-checkbox-secondary-expanded-example-input"
+    id="split-button-checkbox-secondary-expanded-example-check"
+    for="split-button-checkbox-secondary-expanded-example-check-input"
   >
     <input
       class="pf-v5-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-expanded-example-input"
-      name="split-button-checkbox-secondary-expanded-example-input"
+      id="split-button-checkbox-secondary-expanded-example-check-input"
+      name="split-button-checkbox-secondary-expanded-example-check-input"
     />
     <span class="pf-v5-c-check__label">10 selected</span>
   </label>

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

@@ -8,15 +8,17 @@ cssPrefix: pf-v5-c-radio
 ### Basic
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-basic-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-simple"
-    name="exampleRadioSimple"
+    id="radio-basic-example-input"
+    name="radio-basic-example-input"
   />
-
-  <label class="pf-v5-c-radio__label" for="radio-simple">Radio</label>
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-basic-example-input"
+  >Basic radio</label>
 </div>
 
 ```
@@ -24,16 +26,18 @@ cssPrefix: pf-v5-c-radio
 ### Checked
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-checked-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-checked"
-    name="exampleRadioChecked"
+    id="radio-checked-example-input"
+    name="radio-checked-example-input"
     checked
   />
-
-  <label class="pf-v5-c-radio__label" for="radio-checked">Radio checked</label>
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-checked-example-input"
+  >Radio checked</label>
 </div>
 
 ```
@@ -41,14 +45,17 @@ cssPrefix: pf-v5-c-radio
 ### Label wrapping input
 
 ```html
-<label class="pf-v5-c-radio" for="radio-wrap">
+<label
+  class="pf-v5-c-radio"
+  id="radio-label-wrapping-input-example"
+  for="radio-label-wrapping-input-example-input"
+>
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-wrap"
-    name="exampleRadioWrap"
+    id="radio-label-wrapping-input-example-input"
+    name="radio-label-wrapping-input-example-input"
   />
-
   <span class="pf-v5-c-radio__label">Radio label wraps input</span>
 </label>
 
@@ -57,14 +64,16 @@ cssPrefix: pf-v5-c-radio
 ### Reversed
 
 ```html
-<div class="pf-v5-c-radio">
-  <label class="pf-v5-c-radio__label" for="radio-rev">Radio reversed</label>
-
+<div class="pf-v5-c-radio" id="radio-reversed-example">
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-reversed-example-input"
+  >Radio reversed</label>
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-rev"
-    name="exampleRadioReversed"
+    id="radio-reversed-example-input"
+    name="radio-reversed-example-input"
   />
 </div>
 
@@ -73,35 +82,32 @@ cssPrefix: pf-v5-c-radio
 ### Disabled
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-disabled-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-disabled"
-    name="exampleRadioDisabled"
+    id="radio-disabled-example-input"
+    name="radio-disabled-example-input"
     disabled
   />
-
   <label
     class="pf-v5-c-radio__label pf-m-disabled"
-    for="radio-disabled"
+    for="radio-disabled-example-input"
   >Radio disabled</label>
 </div>
-
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-disabled-checked-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-disabled-checked"
-    name="exampleRadioDisabledChecked"
-    disabled
+    id="radio-disabled-checked-example-input"
+    name="radio-disabled-checked-example-input"
     checked
+    disabled
   />
-
   <label
     class="pf-v5-c-radio__label pf-m-disabled"
-    for="radio-disabled-checked"
-  >Radio disabled checked</label>
+    for="radio-disabled-checked-example-input"
+  >Radio disabled</label>
 </div>
 
 ```
@@ -109,21 +115,21 @@ cssPrefix: pf-v5-c-radio
 ### With description
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-with-description-exmaple">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-description"
-    name="exampleRadioDescription"
+    aria-describedby="radio-with-description-exmaple-description"
+    id="radio-with-description-exmaple-input"
+    name="radio-with-description-exmaple-input"
   />
-
   <label
     class="pf-v5-c-radio__label"
-    for="radio-description"
+    for="radio-with-description-exmaple-input"
   >Radio with description</label>
-
   <span
     class="pf-v5-c-radio__description"
+    id="radio-with-description-exmaple-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
 </div>
 
@@ -132,16 +138,17 @@ cssPrefix: pf-v5-c-radio
 ### With body
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-with-body-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-body"
-    name="exampleRadioBody"
+    id="radio-with-body-example-input"
+    name="radio-with-body-example-input"
   />
-
-  <label class="pf-v5-c-radio__label" for="radio-body">Radio with body</label>
-
+  <label
+    class="pf-v5-c-radio__label"
+    for="radio-with-body-example-input"
+  >Radio with body</label>
   <span class="pf-v5-c-radio__body">This is where custom content goes.</span>
 </div>
 
@@ -150,21 +157,21 @@ cssPrefix: pf-v5-c-radio
 ### With description and body
 
 ```html
-<div class="pf-v5-c-radio">
+<div class="pf-v5-c-radio" id="radio-with-description-body-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-description-body"
-    name="exampleRadioDescriptionBody"
+    aria-describedby="radio-with-description-body-example-description"
+    id="radio-with-description-body-example-input"
+    name="radio-with-description-body-example-input"
   />
-
   <label
     class="pf-v5-c-radio__label"
-    for="radio-description-body"
+    for="radio-with-description-body-example-input"
   >Radio with description and body</label>
-
   <span
     class="pf-v5-c-radio__description"
+    id="radio-with-description-body-example-description"
   >Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS od GCP.</span>
   <span class="pf-v5-c-radio__body">This is where custom content goes.</span>
 </div>
@@ -174,15 +181,15 @@ cssPrefix: pf-v5-c-radio
 ### Standalone input
 
 ```html
-<div class="pf-v5-c-radio pf-m-standalone">
+<label class="pf-v5-c-radio pf-m-standalone" id="radio-standalon-input-example">
   <input
     class="pf-v5-c-radio__input"
     type="radio"
-    id="radio-standalone"
-    name="exampleRadioStandalone"
-    aria-label="Standalone input"
+    id="radio-standalon-input-example-input"
+    name="radio-standalon-input-example-input"
+    aria-label="Standalone radio"
   />
-</div>
+</label>
 
 ```
 
@@ -199,6 +206,7 @@ If you extend this component or modify the styles of this component, then make s
 | 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** |
+| `aria-describedby` | `.pf-v5-c-radio__input` |  When using `.pf-v5-c-radio__description` make use of this on the input. |
 
 ### Usage