diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 7481d43f1..7793a01ad 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -38,7 +38,8 @@ export default {
       color: $gray-500;
       background-color: red;
     }
-    &:focus {
+    &:focus,
+    &:focus-visible {
       box-shadow: 0 0 0 2px $blue;
     }
     &:disabled,
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 4a8547a26..d75266010 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -8,7 +8,7 @@
       <div class="row">
         <div class="col">
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
           />
@@ -18,7 +18,7 @@
         <div class="col">
           <h6 class="my-4">Disabled</h6>
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Disabled"
             inputID="test-text-input"
             isDisabled
@@ -29,7 +29,7 @@
         <div class="col">
           <h6 class="my-4">With Error (class="has-error"):</h6>
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
             class="has-error"
@@ -38,14 +38,14 @@
       </div>
       <div class="row my-4">
         <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (Select)</h4>
         </div>
       </div>
       <div class="row">
         <div class="col">
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-1"
           />
         </div>
       </div>
@@ -53,8 +53,8 @@
         <div class="col">
           <h6 class="my-4">Disabled</h6>
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-2"
             isDisabled
           />
         </div>
@@ -63,8 +63,8 @@
         <div class="col">
           <h6 class="my-4">With Error (class="has-error"):</h6>
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-3"
             class="has-error"
           />
         </div>