TwinColSelect 4.0.0 CSS issue

General
1

In version 4.0.0 (compatible with Vaadin 25), selected items in TwinColSelect fail to highlight visually.

Inspection of the rendered DOM shows that items utilize the standard ARIA attribute aria-selected="true" / aria-selected="false" when selected/deselected:

However, in twincolselect.css, the rule for selected item background targets the non-existent [checked] attribute:

twin-col-select div.twincolselect-item[checked] {
background: var(–lumo-primary-color);
color: var(–lumo-tint-80pct);
}

Because [checked] is never placed on the DOM element, the CSS rule never triggers.

I’ve implemented a temporary workaround in my application stylesheet:

twin-col-select div.twincolselect-item[aria-selected="true"] {
    background: var(--lumo-primary-color) !important;
    color: var(--lumo-tint-80pct) !important;
}

twin-col-select div.twincolselect-item:hover {
    background-color: var(--table-hover-bg-color) !important;
    cursor: pointer;
}

twin-col-select div.twincolselect-item[aria-selected="true"]:hover {
    background-color: var(--lumo-primary-color-50pct) !important;
}

I hope this attribute mismatch in twincolselect.css can be fixed directly in an upcoming release of the add-on.

2

It is weird that it works for me

image
image658×770 54.4 KB

It is the same method that toggles both checked attribute and aria-selected

3

Thank you for checking the code!

While toggleValueFromClient() in SelectItem.java explicitly calls getElement().setAttribute("checked", true), the rendered DOM element in the browser only receives aria-selected="true", but not the checked attribute:

`HTML

`

Since a <div> is not a standard form element (like <input type="checkbox">), browsers / Vaadin Flow do not retain checked as a valid HTML attribute on a <div> in the DOM tree.

Therefore, CSS rules targeting div.twincolselect-item[checked] fail to match. Changing the selector in twincolselect.css from [checked] to [aria-selected="true"] resolves this, as aria-selected is properly reflected in the DOM for role="option" elements.

Furthermore, from an HTML/ARIA specification standpoint, since SelectItem assigns role="option", the element represents a list option.

According to W3C standards:

  • checked is strictly reserved for checkable controls like <input type="checkbox"> or <input type="radio">.
  • selected / aria-selected is the standard state attribute for elements with role="option".

Because of this, div.twincolselect-item[checked] in twincolselect.css is semantically the wrong selector for role="option" elements. Supporting [aria-selected="true"] (or [selected]) in the CSS is necessary to align with ARIA standards and ensure proper rendering across browsers.

4

I have not noticed that kind of behavior with Chrome. Which browser you are using?

Btw, I uploaded version 4.1.0 to Directory. The main new thing there is Aura theme support.

5

Thank you for the update and clarification!

With the new version, everything works as expected on our end.

We can confirm that the checked="" attribute is now properly reflected in the rendered DOM (<div class="twincolselect-item" checked="" ...>). The updated rule in twincolselect.css using !important applies the selection styles correctly now.

Thanks again for the quick support and the fix!

1 Like