feat(selector-card): Add descriptive variant for radio selector card (#…

…468) ✅ Closes: COMUI-2784
MyPureCloud · Jun 4, 2024 · a852550 · a852550
1 parent 666b89f
commit a852550
Show file tree

Hide file tree

Showing 12 changed files with 801 additions and 123 deletions.
diff --git a/...-spark-components/src/components/beta/gux-selector-cards/a11yManualChecklist.md b/...-spark-components/src/components/beta/gux-selector-cards/a11yManualChecklist.md
@@ -0,0 +1,16 @@
+# gux-selector-cards manual accessibility testing status
+
+**Last Updated:** 2024-05-29T14:11:41.083Z
+| Pass | WCAG Success Criterion | Notes |
+| --- | --- | --- |
+| ✅ | [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) | - |
+| ✅ | [2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) | - |
+| ✅ | [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html) | - |
+| ✅ | [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) | - |
+| ✅ | [2.5.3 Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html#dfn-name) | - |
+| ✅ | [3.2.1 On Focus](https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html) | - |
+| ✅ | [3.2.2 On Input](https://www.w3.org/WAI/WCAG21/Understanding/on-input.html) | - |
+| ✅ | [3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html) | - |
+| ✅ | [3.2.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html) | - |
+| ✅ | [4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | - |
+| ✅ | [4.1.3 Status Messages](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html) | - |
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/example.html b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/example.html
@@ -31,3 +31,62 @@ <h2>Simple Selector Card Group</h2>
     <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
   </gux-selector-card-beta>
 </gux-selector-cards-beta>
+
+<h2>Descriptive Selector Card Group</h2>
+<gux-selector-cards-beta class="example2">
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="1-B">First</label>
+    <input slot="input" id="1-B" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="2-B">Second</label>
+    <input slot="input" id="2-B" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="3-B">Third</label>
+    <input slot="input" id="third" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="4-B">Fourth</label>
+    <input slot="input" id="4-B" type="radio" name="example2" disabled />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+  </gux-selector-card-beta>
+
+  <gux-selector-card-beta variant="descriptive">
+    <label slot="label" for="5-B">Fifth</label>
+    <input slot="input" id="5-B" type="radio" name="example2" />
+    <span slot="description"
+      >A label for a sample selector card. Used in Spark WCL.</span
+    >
+    <gux-badge slot="badge" bold>Badge</gux-badge>
+    <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+  </gux-selector-card-beta>
+</gux-selector-cards-beta>
+
+<style>
+  .example1 {
+    margin-bottom: 24px;
+  }
+</style>
diff --git a/...ys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/example.html b/...ys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/example.html
@@ -15,7 +15,7 @@ <h4>Default</h4>
         value="card-label"
       />
       <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
-      <span slot="content"
+      <span slot="description"
         >A label for a sample selector card. Used in Spark WCL.</span
       >
     </gux-selector-card-beta>
@@ -34,7 +34,7 @@ <h4>Disabled - Unchecked</h4>
         value="card-label"
       />
       <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
-      <span slot="content" id="existing-id"
+      <span slot="description" id="existing-id"
         >A second label for a sample selector card. Used in Spark WCL.</span
       >
     </gux-selector-card-beta>
@@ -73,7 +73,91 @@ <h4>Longer label</h4>
     </gux-selector-card-beta>
   </div>
 </div>
+<h2>Descriptive - Radio Button</h2>
+<div class="row">
+  <div class="card-container">
+    <h4>Default</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="1-B">Card label</label>
+      <input
+        slot="input"
+        id="1-B"
+        type="radio"
+        name="example1"
+        value="card-label"
+      />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
+
+  <div class="card-container">
+    <h4>Disabled - Unchecked</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="2-B">Card Label</label>
+      <input
+        slot="input"
+        id="2-B"
+        type="radio"
+        name="example2"
+        disabled
+        value="card-label"
+      />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-badge slot="badge" bold>Badge</gux-badge>ß
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
 
+  <div class="card-container">
+    <h4>Disabled - Checked</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="3-B">Card Label</label>
+      <input
+        slot="input"
+        id="3-B"
+        type="radio"
+        name="example3"
+        disabled
+        checked
+        value="card-label"
+      />
+      <span slot="description"
+        >A label for a sample selector card. Used in Spark WCL.</span
+      >
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
+</div>
+<div class="row">
+  <div class="card-container">
+    <h4>Longer label</h4>
+    <gux-selector-card-beta variant="descriptive">
+      <label slot="label" for="4-B"
+        >A longer card label example. This can span up to 2 lines.
+      </label>
+      <input
+        slot="input"
+        id="4-B"
+        type="radio"
+        name="example4"
+        value="card-label"
+      />
+      <span slot="description"
+        >A description for a sample selector card. Used in Spark WCL.
+        Descriptions can span up to 3 lines before being truncated.
+      </span>
+      <gux-badge slot="badge" bold>Badge</gux-badge>
+      <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+    </gux-selector-card-beta>
+  </div>
+</div>
 <style>
   .card-container {
     display: flex;