fix: add missing focused label styles and visual test

test/visual/default.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
 
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../iron-test-helpers/mock-interactions.js"></script>
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox.html">`);
@@ -46,18 +47,28 @@
       <vaadin-checkbox value="2">2</vaadin-checkbox>
     </vaadin-checkbox-group>
   </div>
-  
+
   <div id="validation-tests">
     <vaadin-checkbox-group required error-message="Please choose a number" label="Choose a number" id="validation-checkbox-group">
       <vaadin-checkbox value="1">1</vaadin-checkbox>
       <vaadin-checkbox value="2">2</vaadin-checkbox>
     </vaadin-checkbox-group>
   </div>
 
+  <div id="focus-tests">
+    <vaadin-checkbox-group label="Focused">
+      <vaadin-checkbox id="focus-checkbox" value="1">1</vaadin-checkbox>
+      <vaadin-checkbox value="2">2</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </div>
+
   <script>
     window.addEventListener('WebComponentsReady', () => {
       const checkboxGroup = document.getElementById('validation-checkbox-group');
       checkboxGroup.validate();
+
+      MockInteractions.keyDownOn(document.body, 9);
+      document.getElementById('focus-checkbox').dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
     });
   </script>
 

test/visual/test.js

@@ -52,6 +52,13 @@ gemini.suite('vaadin-checkbox', function(rootSuite) {
         .setCaptureElements('#validation-tests')
         .capture('error');
     });
+
+    gemini.suite(`focus-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#focus-tests')
+        .capture('focus');
+    });
   });
 
 });

theme/lumo/vaadin-checkbox-group-styles.html

@@ -1,3 +1,4 @@
+<link rel="import" href="../../../vaadin-lumo-styles/color.html">
 <link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">
 
 <dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
@@ -33,6 +34,21 @@
         color: var(--lumo-disabled-text-color);
         -webkit-text-fill-color: var(--lumo-disabled-text-color);
       }
+
+      :host([focused]:not([disabled])) [part="label"] {
+        color: var(--lumo-primary-text-color);
+      }
+
+      :host(:hover:not([disabled]):not([focused])) [part="label"] {
+        color: var(--lumo-body-text-color);
+      }
+
+      /* Touch device adjustment */
+      @media (pointer: coarse) {
+        :host(:hover:not([disabled]):not([focused])) [part="label"] {
+          color: var(--lumo-secondary-text-color);
+        }
+      }
     </style>
   </template>
 </dom-module>

theme/material/vaadin-checkbox-group-styles.html

@@ -1,3 +1,4 @@
+<link rel="import" href="../../../vaadin-material-styles/color.html">
 <link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">
 
 <dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
@@ -43,6 +44,10 @@
         color: var(--material-disabled-text-color);
         -webkit-text-fill-color: var(--material-disabled-text-color);
       }
+
+      :host([focused]:not([invalid])) [part="label"] {
+        color: var(--material-primary-text-color);
+      }
     </style>
   </template>
 </dom-module>