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);
  }