Merge pull request #228 from Safelite/CSR-342-nested-radio

CSR-342 WIP & QA fix.

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
     "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/address-poc/address-poc.vue",
+    "!src/layouts/nested-radio-poc/nested-radio.vue",
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {

src/layouts/nested-radio-poc/nested-radio.vue

@@ -0,0 +1,27 @@
+<template>
+<h5>POC</h5>
+
+</template>
+
+<script>
+
+import listCard from "@/ux-components/list-card/list-card";
+import radio from "@/ux-components/radio/radio";
+
+export default {
+  name: "nestedRadio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    screenReaderOnlyText: String,
+    hasError: Boolean,
+  },
+};
+
+</script>

src/router/index.js

@@ -11,6 +11,7 @@ import store from "@/store";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import AddressPOC from "@/layouts/address-poc/address-poc.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
+import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
 
 const routes = [
   {
@@ -33,6 +34,11 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
+  {
+    path: "/nested-radio", // This is a temporary route for testing.
+    name: "NestedRadio",
+    component: NestedRadio,
+  },
   {
     path: "/",
     name: "root",

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -133,9 +133,11 @@ export default {
     height: 0;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
+      z-index: 3;
     }
     &:focus + label {
       box-shadow: 0 0 0 2px $blue;
+      z-index: 3;
     }
     &:checked + label {
       background: $blue-100;