fix: use correct focused readonly checkbox group label styles (#7776) (…

…#7787) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Sep 10, 2024 · cdfa319 · cdfa319
1 parent 91bc69d
commit cdfa319
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js b/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js
@@ -49,6 +49,13 @@ describe('checkbox-group', () => {
       await visualDiff(div, 'label-focused');
     });
 
+    it('label focused readonly', async () => {
+      element.label = 'Label';
+      element.readonly = true;
+      await sendKeys({ press: 'Tab' });
+      await visualDiff(div, 'label-focused-readonly');
+    });
+
     it('label disabled', async () => {
       element.label = 'Label';
       element.disabled = true;

diff --git a/...test/visual/lumo/screenshots/checkbox-group/baseline/label-focused-readonly.png b/...test/visual/lumo/screenshots/checkbox-group/baseline/label-focused-readonly.png
diff --git a/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js b/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js
@@ -35,7 +35,7 @@ const checkboxGroup = css`
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
   }
 
-  :host([focused]:not([disabled])) [part='label'] {
+  :host([focused]:not([readonly])) [part='label'] {
     color: var(--lumo-primary-text-color);
   }