Skip to content

fix(webkit): STO-16 link field-multi-select option labels to their checkbox input - #1041

Merged
robson-junior-azion merged 1 commit into
v3from
fix/webkit-field-multi-select-label-input-id
Sep 30, 2026
Merged

robson-junior-azion merged 1 commit into
v3from
fix/webkit-field-multi-select-label-input-id

Conversation

@robson-junior-azion

@robson-junior-azion robson-junior-azion commented Sep 30, 2026 •

Copy link
Copy Markdown
Contributor

Context - STO-16

QA report item STO-16 (Console 2.8.4): in Create Credential (/credentials/object-storage and the bucket's Credentials tab), clicking a capability's name or description, such as "Read Files", does nothing. Only the checkbox square responds. The checkboxes also have no accessible name.

Root cause

field-multi-select passed :id to the PrimeVue 3.35 Checkbox. That id lands on the root div.p-checkbox, not on the hidden <input>, so <label for="capabilities_readFiles"> pointed to a div. document.getElementById('capabilities_readFiles').tagName returned DIV.

Fix

Pass inputId instead of id. The input now carries the id, so the label is associated with it.

The toggle still happens only once: the label click turns into a click on the input, which bubbles to the Checkbox root, where PrimeVue's single onClick handler computes the new value from modelValue.

Impact

  • Only consumers are the two FormFieldsCredential.vue in the console (Credentials and the bucket's Credentials tab).
  • The label content is plain text (option.label and option.description, no slot), so there are no links or buttons inside it that a larger click target could interfere with.
  • Nothing in console src/tests selects the checkbox by that id. The e2e helper tests/support/ui/storage.js uses focus + Space, which still works. It can now use getByRole('checkbox', { name }).

Validation

Playwright in Chromium against the Core/Form/FieldMultiSelect stories:

  • getElementById returns INPUT ✅
  • checkbox has an accessible name ✅
  • clicking the label toggles on and off, once per click ✅
  • clicking the box and pressing Space still toggle once ✅
  • disabled: clicking the label does nothing ✅
  • preselected values: only the clicked option changes ✅

With the change reverted, the same script fails (no checkbox with an accessible name).

  • eslint on the changed file ✅
  • pnpm webkit:build:dts and pnpm storybook:build not run

…input

Pass inputId instead of id to the PrimeVue Checkbox so the option label's
for attribute targets the input rather than the root div. Clicking the
option text now toggles the checkbox and the checkbox gets an accessible
name.
@robson-junior-azion
robson-junior-azion requested a review from a team as a code owner September 30, 2026 19:19
@robson-junior-azion
robson-junior-azion merged commit 194bf55 into v3 Sep 30, 2026
1 check passed
@robson-junior-azion
robson-junior-azion deleted the fix/webkit-field-multi-select-label-input-id branch September 30, 2026 19:29
github-actions Bot pushed a commit that referenced this pull request Sep 30, 2026
## [3.9.4](https://github.com/aziontech/webkit/compare/@aziontech/webkit@3.9.3...@aziontech/webkit@3.9.4) (2026-09-30)

### Bug Fixes

* **theme:** restore theme to @aziontech/theme@2.6.0 ([#1022](#1022)) ([3882556](3882556))
* **webkit:** link field-multi-select option labels to their checkbox input ([#1041](#1041)) ([194bf55](194bf55))
@github-actions

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 3.9.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

@robson-junior-azion robson-junior-azion changed the title fix(webkit): link field-multi-select option labels to their checkbox input fix(webkit): STO-16 link field-multi-select option labels to their checkbox input Sep 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

1 participant