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(NcCheckboxRadioSwitch): visually hidden input position #4882

Merged
merged 1 commit into from Nov 28, 2023
Merged

fix(NcCheckboxRadioSwitch): visually hidden input position #4882

merged 1 commit into from Nov 28, 2023

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Nov 28, 2023

☑️ Resolves

<input> in <NcCheckboxRadioSwitch> is visually hidden with position: absolute.

But when it is used in a scrollable container in another position: relative container, positioning is broken and is not relative to the <NcCheckboxRadioSwitch> position.

As a result:

  • It doesn't work for accessibility having the wrong position
  • Click on the input puts focus on it and scroll the container to the wrong position

🚧 Tasks

  • Add position: relative to the checkbox radio switch container to position input relative to the switch.

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable

@ShGKme
fix(NcCheckboxRadioSwitch): visually hidden input position
8269af2 
Otherwise it is not actually positioned on the label and moved away in scrollable container.
It also may scroll the container on click.

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme added bug Something isn't working accessibility Making sure we design for the widest range of people possible, including those who have disabilities feature: checkbox-radio-switch Related to the checkbox-radio-switch component labels Nov 28, 2023
@ShGKme ShGKme added this to the 8.2.1 milestone Nov 28, 2023
@ShGKme ShGKme requested review from susnux and Pytal November 28, 2023 23:13
@ShGKme ShGKme self-assigned this Nov 28, 2023
@ShGKme
Copy link
Contributor Author

ShGKme commented Nov 28, 2023

cc @dartcafe

susnux
susnux approved these changes Nov 28, 2023
View reviewed changes
Copy link
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

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

Nice catch

@Pytal Pytal added the 4. to release Ready to be released and/or waiting for tests to finish label Nov 28, 2023
@Pytal Pytal merged commit 8c16c4b into master Nov 28, 2023
15 checks passed
@Pytal Pytal deleted the fix/checkbox-radio-switch--hidden-input-position branch November 28, 2023 23:31
@susnux susnux mentioned this pull request Nov 30, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@susnux susnux susnux approved these changes

@Pytal Pytal Pytal approved these changes

@raimund-schluessler raimund-schluessler Awaiting requested review from raimund-schluessler

@JuliaKirschenheuter JuliaKirschenheuter Awaiting requested review from JuliaKirschenheuter

Assignees

@ShGKme ShGKme

Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility Making sure we design for the widest range of people possible, including those who have disabilities bug Something isn't working feature: checkbox-radio-switch Related to the checkbox-radio-switch component
Projects
None yet
Milestone
8.2.1
Development

Successfully merging this pull request may close these issues.

[8.0.1] Sidebar vanishes out of viewport after adding an element to content
3 participants
@ShGKme @susnux @Pytal