Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(a11y): connect labels to inputs #1542

Merged
merged 15 commits into from
Jan 31, 2025
Merged

fix(a11y): connect labels to inputs #1542

merged 15 commits into from
Jan 31, 2025

Conversation

vtsvetkov-splunk
Copy link
Contributor

@vtsvetkov-splunk vtsvetkov-splunk commented Jan 22, 2025 •
edited
Loading

Issue number: ADDON-68266

PR Type

What kind of change does this PR introduce?

  • Feature
  • Bug Fix
  • Refactoring (no functional or API changes)
  • Documentation Update
  • Maintenance (dependency updates, CI, etc.)

Summary

The current structure is

<ControlGroup label="Label">
  <div>
    <Text />
  </div>
<ControlGroup />

ControlGroup component modifies the first child and passes additional props to it. Assuming, the first child is the control itself, but it is a div element in this case. So, all a11y props wasted.

closes #936

Changes

  • Remove extra wrappers between ControlGroup and controls, allowing to pass all a11y props from SUI ControlGroup to SUI components
  • Fix markup and remove hardcoded width scattered among the project
  • Adjust tests to test inputs by accessible properties
  • Storybook: add ControlGroup wrapper for every control story to eliminate the a11y warnings

User experience

  • Improved a11y

Checklist

If an item doesn't apply to your changes, leave it unchecked.

@vtsvetkov-splunk
fix(a11y): connect labels to inputs
2b073b9 
Signed-off-by: Viktor Tsvetkov <142901247+vtsvetkov-splunk@users.noreply.github.com>
srv-rr-github-token and others added 4 commits January 22, 2025 15:47
@srv-rr-github-token
update screenshots
925e9ea
@vtsvetkov-splunk
trigger ci
08f73d2
@vtsvetkov-splunk
fix test
9390731 
Signed-off-by: Viktor Tsvetkov <142901247+vtsvetkov-splunk@users.noreply.github.com>
@vtsvetkov-splunk
exclude extra props from passing to SUI components
43515f2 
Signed-off-by: Viktor Tsvetkov <142901247+vtsvetkov-splunk@users.noreply.github.com>
srv-rr-github-token and others added 4 commits January 23, 2025 09:03
@srv-rr-github-token
update screenshots
abcbdf5
@vtsvetkov-splunk
fix radio width
6285e04 
Signed-off-by: Viktor Tsvetkov <142901247+vtsvetkov-splunk@users.noreply.github.com>
@srv-rr-github-token
update screenshots
eb65811
@vtsvetkov-splunk
Merge remote-tracking branch 'origin/develop' into feature/fix-input-…
a8d2b7f 
…labels
@vtsvetkov-splunk vtsvetkov-splunk force-pushed the feature/fix-input-labels branch from eb5c382 to a8d2b7f Compare January 23, 2025 09:20
@vtsvetkov-splunk vtsvetkov-splunk marked this pull request as ready for review January 23, 2025 09:45
@vtsvetkov-splunk vtsvetkov-splunk requested a review from a team as a code owner January 23, 2025 09:45
rohanm-crest
rohanm-crest previously approved these changes Jan 23, 2025
View reviewed changes
@vtsvetkov-splunk vtsvetkov-splunk requested a review from a team January 23, 2025 12:53
@vtsvetkov-splunk vtsvetkov-splunk enabled auto-merge (squash) January 23, 2025 18:24
@vtsvetkov-splunk vtsvetkov-splunk self-assigned this Jan 23, 2025
@vtsvetkov-splunk vtsvetkov-splunk added the javascript Pull requests that update Javascript code label Jan 27, 2025
@vtsvetkov-splunk
Merge remote-tracking branch 'origin/develop' into feature/fix-input-…
379d194 
…labels

# Conflicts:
#	ui/src/components/CheckboxGroup/stories/__images__/CheckboxGroup-base-chromium.png
#	ui/src/components/CheckboxGroup/stories/__images__/CheckboxGroup-create-mode-chromium.png
#	ui/src/components/CheckboxGroup/stories/__images__/CheckboxGroup-mixed-with-groups-chromium.png
#	ui/src/components/CheckboxGroup/stories/__images__/CheckboxGroup-multiline-chromium.png
#	ui/src/components/CheckboxGroup/stories/__images__/CheckboxGroup-with-single-group-chromium.png
#	ui/src/components/CheckboxTree/stories/__images__/CheckboxTree-base-chromium.png
#	ui/src/components/CheckboxTree/stories/__images__/CheckboxTree-create-mode-chromium.png
#	ui/src/components/CheckboxTree/stories/__images__/CheckboxTree-mixed-with-groups-chromium.png
#	ui/src/components/CheckboxTree/stories/__images__/CheckboxTree-multiline-chromium.png
#	ui/src/components/CheckboxTree/stories/__images__/CheckboxTree-multiline-with-groups-chromium.png
#	ui/src/components/CheckboxTree/stories/__images__/CheckboxTree-with-single-group-chromium.png
#	ui/src/components/FileInputComponent/stories/__images__/FileInputComponent-base-chromium.png
#	ui/src/components/FileInputComponent/stories/__images__/FileInputComponent-encrypted-with-default-name-chromium.png
#	ui/src/components/FileInputComponent/stories/__images__/FileInputComponent-with-default-name-chromium.png
#	ui/src/components/MultiInputComponent/stories/__images__/MultiInputComponent-all-props-chromium.png
#	ui/src/components/MultiInputComponent/stories/__images__/MultiInputComponent-base-chromium.png
#	ui/src/components/MultiInputComponent/stories/__images__/MultiInputComponent-endpoint-api-chromium.png
#	ui/src/components/RadioComponent/stories/__images__/RadioComponent-base-chromium.png
#	ui/src/components/SingleInputComponent/stories/__images__/SingleInputComponent-accept-any-input-chromium.png
#	ui/src/components/SingleInputComponent/stories/__images__/SingleInputComponent-allow-deny-list-from-backend-chromium.png
#	ui/src/components/SingleInputComponent/stories/__images__/SingleInputComponent-select-list-chromium.png
#	ui/src/pages/Input/stories/__images__/InputPage-input-page-view-add-chromium.png
#	ui/src/pages/Input/stories/__images__/InputPage-input-page-view-update-input-chromium.png
#	ui/src/pages/Input/stories/__images__/InputPage-input-tab-view-add-chromium.png
soleksy-splunk
soleksy-splunk approved these changes Jan 30, 2025
View reviewed changes
Copy link
Contributor

@soleksy-splunk soleksy-splunk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested, works good

@vtsvetkov-splunk vtsvetkov-splunk merged commit 5335782 into develop Jan 31, 2025
123 checks passed
@vtsvetkov-splunk vtsvetkov-splunk deleted the feature/fix-input-labels branch January 31, 2025 08:49
@github-actions github-actions bot locked and limited conversation to collaborators Jan 31, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@soleksy-splunk soleksy-splunk soleksy-splunk approved these changes

@rohanm-crest rohanm-crest rohanm-crest approved these changes

Assignees

@vtsvetkov-splunk vtsvetkov-splunk

Labels
javascript Pull requests that update Javascript code size/XL
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

BUG: fix input label accessibility
4 participants
@vtsvetkov-splunk @soleksy-splunk @rohanm-crest @srv-rr-github-token