From 9e1273375676868f99ada56b9b84c45c274ce9cd Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 17 Feb 2022 13:59:40 -0500
Subject: [PATCH] CSR-342 WIP & QA fix.

---
 jest.config.js                                |  1 +
 src/layouts/nested-radio-poc/nested-radio.vue | 27 +++++++++++++++++++
 src/router/index.js                           |  6 +++++
 .../list-button-horizontal.vue                |  2 ++
 4 files changed, 36 insertions(+)
 create mode 100644 src/layouts/nested-radio-poc/nested-radio.vue

diff --git a/jest.config.js b/jest.config.js
index b8beb88cc..4a2601c8f 100644
--- a/jest.config.js
+++ b/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: {
diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
new file mode 100644
index 000000000..6d05c4009
--- /dev/null
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 133a4106e..b564b7e94 100644
--- a/src/router/index.js
+++ b/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",
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index cc712e613..52cad7e91 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/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;