refactor!: update select to use new structure #2282

web-padawan · 2021-07-29T07:36:49Z

Description

This PR adds @vaadin/select base class, Lumo and Material theme, and visual tests.

Fixes #2197
Fixes #2198

Type of change

Breaking change

fhdhsni · 2021-08-10T14:25:55Z

Points 8 and 10 from this comment is applicable here too:

aria-owns and aria-controls on the button referring to the listbox.
having aria-labelledby(refering to the label)/aria-label attributes on the listbox

packages/select/src/vaadin-select.js

packages/select/test/accessibility.test.js

packages/select/test/scrollable-viewport.test.js

packages/select/test/select.test.js

packages/select/src/vaadin-select.js

vursen · 2021-09-01T08:05:13Z

Observation: An unknown symbol appears in the announcement in Safari

OS: Mac OS Big Sur 11.5.2

Browser: Safari 14.1.2

When announcing an option in Safari, there appears an unknown symbol in the announcement, in the place of the selected icon (represented as the ::before pseudo-element in the DOM).

This symbol doesn't get announced on my computer so it is apparently not an issue.

Snippet:

<div id="select"></div>

<script type="module">
  import '@vaadin/select';

  import { html, render } from 'lit';

  render(html`
    <vaadin-select
      value="recent"
      label="Sort by"
      .renderer="${(root) =>
        render(
          html`
            <vaadin-list-box>
              <vaadin-item value="recent">Most recent first</vaadin-item>
              <vaadin-item value="rating-desc">Rating: high to low</vaadin-item>
              <vaadin-item value="rating-asc">Rating: low to high</vaadin-item>
              <vaadin-item value="price-desc">Price: high to low</vaadin-item>
              <vaadin-item value="price-asc">Price: low to high</vaadin-item>
            </vaadin-list-box>
          `,
          root
        )}"
    ></vaadin-select>
  `, document.querySelector('#select'))
</script>

vursen · 2021-09-01T08:11:37Z

Issue: The selected option doesn't get announced as selected in Chrome

OS: Mac OS Big Sur 11.5.2

Browser: Chrome 93.0.4577.63 (Official Build) (arm64)

There seems to be a bug in Chrome as the selected option doesn't get announced as selected after the focus has moved to another option once (see the recording).

Although, everything announces correctly in Safari and Firefox.

Screen.Recording.2021-09-01.at.11.08.48.mov

Snippet:

<div id="select"></div>

<script type="module">
  import '@vaadin/select';

  import { html, render } from 'lit';

  render(html`
    <vaadin-select
      value="recent"
      label="Sort by"
      .renderer="${(root) =>
        render(
          html`
            <vaadin-list-box>
              <vaadin-item value="recent">Most recent first</vaadin-item>
              <vaadin-item value="rating-desc">Rating: high to low</vaadin-item>
              <vaadin-item value="rating-asc">Rating: low to high</vaadin-item>
              <vaadin-item value="price-desc">Price: high to low</vaadin-item>
              <vaadin-item value="price-asc">Price: low to high</vaadin-item>
            </vaadin-list-box>
          `,
          root
        )}"
    ></vaadin-select>
  `, document.querySelector('#select'))
</script>

vursen · 2021-09-01T08:43:18Z

Issue: The list box doesn't get the correct position in Firefox

OS: Mac OS Big Sur 11.5.2

Browser: Firefox 91.0.2

When opening the list box, it is shown at the bottom-left corner of the page and isn't positioned relative to the select element in Firefox (see the screenshot).

Snippet:

<div id="select"></div>

<script type="module">
  import '@vaadin/select';

  import { html, render } from 'lit';

  render(html`
    <vaadin-select
      value="recent"
      label="Sort by"
      .renderer="${(root) =>
        render(
          html`
            <vaadin-list-box>
              <vaadin-item value="recent">Most recent first</vaadin-item>
              <vaadin-item value="rating-desc">Rating: high to low</vaadin-item>
              <vaadin-item value="rating-asc">Rating: low to high</vaadin-item>
              <vaadin-item value="price-desc">Price: high to low</vaadin-item>
              <vaadin-item value="price-asc">Price: low to high</vaadin-item>
            </vaadin-list-box>
          `,
          root
        )}"
    ></vaadin-select>
  `, document.querySelector('#select'))
</script>

packages/select/src/vaadin-select.js

web-padawan · 2021-09-01T13:01:17Z

Observation: An unknown symbol appears in the announcement in Safari

Created a separate issue to handle this in vaadin-item properly: #2429

Issue: The list box doesn't get the correct position in Firefox

This appears to be an edge case I couldn't reproduce. Reported #2430

sonarcloud · 2021-09-01T13:35:48Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

web-padawan · 2021-09-01T14:15:40Z

Regarding #2282 (comment)

aria-owns and aria-controls on the button referring to the listbox.

This is not mentioned in the ARIA practices example that we use as a reference, for now I will skip this part.

having aria-labelledby(refering to the label)/aria-label attributes on the listbox

This does not seem to have any effect in VoiceOver and it will only work if vaadin-select is in global scope.

web-padawan · 2021-09-01T14:17:14Z

There seems to be a bug in Chrome as the selected option doesn't get announced as selected

I think this is related to vaadin-list-box and it has other issues. I will create a separate issue for it tomorrow.

vursen · 2021-09-02T08:44:14Z

Changes in the Lumo theme

diff --git a/packages/select/theme/lumo/vaadin-select-styles.js b/packages/select/theme/lumo/vaadin-select-styles.js
index 050f81d1d..73de1d218 100644
--- a/packages/select/theme/lumo/vaadin-select-styles.js
+++ b/packages/select/theme/lumo/vaadin-select-styles.js
@@ -1,43 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
-import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
+import '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
 
 registerStyles(
   'vaadin-select',
   css`
-    :host {
-      outline: none;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    [selected] {
-      padding-left: 0;
-      padding-right: 0;
-      flex: auto;
+    :host(:not([theme*='align'])) ::slotted([slot='value']) {
+      text-align: start;
     }
 
-    :host([theme~='small']) [selected] {
-      padding: 0;
-      min-height: var(--lumo-size-s);
+    [part='input-field'] ::slotted([slot='value']) {
+      font-weight: 500;
     }
 
-    :host([theme~='align-left']) [selected] {
-      text-align: left;
+    /* placeholder styles */
+    :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
+      color: inherit;
+      transition: opacity 0.175s 0.1s;
+      opacity: 0.5;
     }
 
-    :host([theme~='align-right']) [selected] {
-      text-align: right;
-    }
-
-    :host([theme~='align-center']) [selected] {
-      text-align: center;
+    :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
+      color: var(--lumo-body-text-color);
     }
 
     [part='toggle-button']::before {
@@ -49,51 +41,27 @@ registerStyles(
       color: var(--lumo-contrast-80pct);
     }
   `,
-  { include: ['lumo-field-button'], moduleId: 'lumo-select' }
+  { moduleId: 'lumo-select', include: ['lumo-input-field-shared-styles'] }
 );
 
 registerStyles(
-  'vaadin-select-text-field',
+  'vaadin-select-value-button',
   css`
-    :host([theme~='align-center']) ::slotted([part~='value']) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
-    }
-
-    :host([theme~='align-center']) ::slotted([part~='value']) {
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    :host([theme~='align-right']) ::slotted([part~='value']) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
-    }
-
-    [part='input-field'] {
-      cursor: default;
-    }
-
-    [part='input-field'] ::slotted([part='value']) {
-      display: flex;
-    }
-
-    [part='input-field']:focus {
-      outline: none;
-    }
-
-    /* RTL specific styles */
-    :host([theme~='align-left'][dir='rtl']) ::slotted([part~='value']) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
+    :host {
+      min-height: var(--lumo-size-m);
+      padding: 0 0.25em;
     }
 
-    :host([theme~='align-center'][dir='rtl']) ::slotted([part~='value']) {
-      --_lumo-text-field-overflow-mask-image: none;
+    :host::before,
+    :host::after {
+      display: none;
     }
 
-    :host([dir='rtl']) ::slotted([part~='value']),
-    :host([theme~='align-right'][dir='rtl']) ::slotted([part~='value']) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
+    :host([focus-ring]) {
+      box-shadow: none;
     }
   `,
-  { moduleId: 'lumo-select-text-field' }
+  { moduleId: 'lumo-select-value-button' }
 );
 
 registerStyles(

Changes in the Material theme

diff --git a/packages/select/theme/material/vaadin-select-styles.js b/packages/select/theme/material/vaadin-select-styles.js
index ccc5c3bf8..0f369752d 100644
--- a/packages/select/theme/material/vaadin-select-styles.js
+++ b/packages/select/theme/material/vaadin-select-styles.js
@@ -1,11 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-item/theme/material/vaadin-item.js';
-import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-import '@vaadin/vaadin-material-styles/mixins/field-button.js';
+import '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
 
 registerStyles(
   'vaadin-select',
@@ -15,6 +16,17 @@ registerStyles(
       -webkit-tap-highlight-color: transparent;
     }
 
+    /* placeholder styles */
+    :host(:not([has-value])) [part='input-field'] ::slotted([slot='value']) {
+      color: var(--material-disabled-text-color);
+      transition: opacity 0.175s 0.1s;
+      opacity: 1;
+    }
+
+    :host([has-value]) [part='input-field'] ::slotted([slot='value']) {
+      color: var(--material-body-text-color);
+    }
+
     [part='toggle-button']::before {
       content: var(--material-icons-dropdown);
     }
@@ -27,31 +39,24 @@ registerStyles(
       pointer-events: none;
     }
   `,
-  { include: ['material-field-button'], moduleId: 'material-select' }
+  { moduleId: 'material-select', include: ['material-input-field-shared-styles'] }
 );
 
 registerStyles(
-  'vaadin-select-text-field',
+  'vaadin-select-value-button',
   css`
     :host {
-      width: 100%;
-    }
-
-    :host([disabled]) [part='input-field'],
-    [part='input-field'],
-    [part='value'] {
-      cursor: default;
-    }
-
-    [part='input-field']:focus {
-      outline: none;
+      font: inherit;
+      letter-spacing: normal;
+      text-transform: none;
     }
 
-    ::slotted([part='value']) {
-      display: flex;
+    :host::before,
+    :host::after {
+      display: none;
     }
   `,
-  { moduleId: 'material-select-text-field' }
+  { moduleId: 'material-select-value-button' }
 );
 
 registerStyles(

web-padawan · 2021-09-02T09:30:00Z

Confirmed that Flow component ITs pass with the following change in SelectElement implementation:

diff --git a/vaadin-select-flow-parent/vaadin-select-testbench/src/main/java/com/vaadin/flow/component/select/testbench/SelectElement.java b/vaadin-select-flow-parent/vaadin-select-testbench/src/main/java/com/vaadin/flow/component/select/testbench/SelectElement.java
index 1917ff160..3f73b48d6 100644
--- a/vaadin-select-flow-parent/vaadin-select-testbench/src/main/java/com/vaadin/flow/component/select/testbench/SelectElement.java
+++ b/vaadin-select-flow-parent/vaadin-select-testbench/src/main/java/com/vaadin/flow/component/select/testbench/SelectElement.java
@@ -108,11 +108,7 @@ public class SelectElement extends TestBenchElement
     }
 
     public ItemElement getSelectedItem() {
-        TestBenchElement textFieldElement = $("vaadin-select-text-field")
-                .first();
-        TestBenchElement itemSlotElement = wrapElement(
-                textFieldElement.findElement(By.xpath("div[@part=\"value\"]")),
-                getCommandExecutor());
-        return itemSlotElement.$(ItemElement.class).first();
+        TestBenchElement valueElement = $("vaadin-select-value-button").first();
+        return valueElement.$(ItemElement.class).first();
     }
 }

vaadin-bot · 2021-12-02T06:51:40Z

This ticket/PR has been released with platform 22.0.0.

web-padawan added the a11y Accessibility issue label Jul 29, 2021

web-padawan force-pushed the feat/select branch from 3e8e2bd to 7bdcb4e Compare July 29, 2021 08:02

web-padawan mentioned this pull request Jul 29, 2021

[input-container] Add styles for Lumo text-align variants #2283

Closed

web-padawan force-pushed the feat/select branch from 7bdcb4e to f62140c Compare August 6, 2021 10:32

web-padawan marked this pull request as ready for review August 6, 2021 10:32

fhdhsni self-requested a review August 9, 2021 10:47

web-padawan force-pushed the feat/select branch from f62140c to bd9aa0b Compare August 19, 2021 07:26

web-padawan mentioned this pull request Aug 30, 2021

Move select component to non-prefixed package #2414

Closed

web-padawan force-pushed the feat/select branch from bd9aa0b to 1fee08e Compare August 30, 2021 12:14

web-padawan requested review from vursen and removed request for fhdhsni August 30, 2021 12:14

web-padawan changed the title ~~feat: add select using slotted button~~ refactor!: update select to use new structure Aug 30, 2021

web-padawan force-pushed the feat/select branch 2 times, most recently from 87f3c92 to 22d8e16 Compare August 30, 2021 15:04

web-padawan added the a11y phase 1 First batch of accessibility fixes label Aug 30, 2021

web-padawan added 6 commits August 31, 2021 16:34

refactor!: update select to use new structure

b17d0dc

fix: adjust vaadin-grid-pro-edit-select

06e8ca5

test: update custom-field visual tests

256509c

refactor: revert some theme changes

9743a26

refactor: revert moduleId changes

df7c0bc

test: update old custom-field visual tests

95e2c6a

web-padawan force-pushed the feat/select branch from aaff20b to 95e2c6a Compare August 31, 2021 13:35

vursen reviewed Aug 31, 2021

View reviewed changes

refactor: apply code review suggestions

636be84

vursen reviewed Sep 1, 2021

View reviewed changes

refactor: add vaadin-select-vaue-button

5dd9578

web-padawan mentioned this pull request Sep 1, 2021

[item] Add dedicated part for checkmark with aria-hidden=true #2429

Closed

vursen reviewed Sep 1, 2021

View reviewed changes

packages/select/src/vaadin-select.js Outdated Show resolved Hide resolved

fix: apply suggestions, fix CSS, add focus-ring tests

401298f

web-padawan added 3 commits September 1, 2021 16:06

test: add not-animated-styles

cf803cd

test: rename toggle to value button

e452238

fix: update grid-pro styles and test

926fe5b

vursen approved these changes Sep 2, 2021

View reviewed changes

web-padawan merged commit 47991ca into master Sep 2, 2021

web-padawan deleted the feat/select branch September 2, 2021 09:30

vursen pushed a commit that referenced this pull request Sep 3, 2021

refactor!: update select to use new structure (#2282)

50368df

This was referenced Sep 13, 2021

fix: make select work with small theme variant #2518

Merged

[select] Toggle button aria-label attribute value is not configurable #761

Closed

vaadin-bot added the Released with Platform 22.0.0 label Dec 2, 2021

web-padawan mentioned this pull request Apr 8, 2024

fix: show placeholder item when an empty item is selected #7303

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor!: update select to use new structure #2282

refactor!: update select to use new structure #2282

web-padawan commented Jul 29, 2021 •

edited

Loading

fhdhsni commented Aug 10, 2021

vursen commented Sep 1, 2021 •

edited

Loading

vursen commented Sep 1, 2021 •

edited

Loading

vursen commented Sep 1, 2021 •

edited

Loading

web-padawan commented Sep 1, 2021

sonarcloud bot commented Sep 1, 2021

web-padawan commented Sep 1, 2021

web-padawan commented Sep 1, 2021

vursen commented Sep 2, 2021

web-padawan commented Sep 2, 2021

vaadin-bot commented Dec 2, 2021

refactor!: update select to use new structure #2282

refactor!: update select to use new structure #2282

Conversation

web-padawan commented Jul 29, 2021 • edited Loading

Description

Type of change

fhdhsni commented Aug 10, 2021

vursen commented Sep 1, 2021 • edited Loading

Observation: An unknown symbol appears in the announcement in Safari

vursen commented Sep 1, 2021 • edited Loading

Issue: The selected option doesn't get announced as selected in Chrome

vursen commented Sep 1, 2021 • edited Loading

Issue: The list box doesn't get the correct position in Firefox

web-padawan commented Sep 1, 2021

sonarcloud bot commented Sep 1, 2021

web-padawan commented Sep 1, 2021

web-padawan commented Sep 1, 2021

vursen commented Sep 2, 2021

Changes in the Lumo theme

Changes in the Material theme

web-padawan commented Sep 2, 2021

vaadin-bot commented Dec 2, 2021

web-padawan commented Jul 29, 2021 •

edited

Loading

vursen commented Sep 1, 2021 •

edited

Loading

vursen commented Sep 1, 2021 •

edited

Loading

vursen commented Sep 1, 2021 •

edited

Loading