Skip to content

[EuiCheckbox][EuiRadio] Fix checkboxes/radios without labels not being clickable #5149

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

Closed
wants to merge 3 commits into from
Closed

[EuiCheckbox][EuiRadio] Fix checkboxes/radios without labels not being clickable #5149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b42aaf3
Fix screenReaderOnly CSS to only apply to check/radio inputs with labels
cee-chen Sep 7, 2021
18e1e78
Clean up noLabel input CSS that was overriding previous screen reader…
cee-chen Sep 7, 2021
b0e52ef
Add changelog entry
cee-chen Sep 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
## [`master`](https://github.com/elastic/eui/tree/master)

No public interface changes since `37.6.1`.
**Bug fixes**

- Fixed `EuiCheckbox`s and `EuiRadio`s without labels not being clickable ([#5149](https://github.com/elastic/eui/pull/5149))

## [`37.6.1`](https://github.com/elastic/eui/tree/v37.6.1)

Expand Down
5 changes: 3 additions & 2 deletions src/components/form/checkbox/_checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
.euiCheckbox {
position: relative;

.euiCheckbox__input {
&:not(.euiCheckbox--noLabel) .euiCheckbox__input {
@include euiScreenReaderOnly;
}

.euiCheckbox__input {
~ .euiCheckbox__label {
display: inline-block;
padding-left: ($euiCheckBoxSize * 1.5);
Expand Down Expand Up @@ -90,7 +92,6 @@
opacity: 0; /* 1 */
z-index: 1; /* 1 */
margin: 0; /* 1 */
left: 0; /* 1 */
Copy link
Contributor

@thompsongl thompsongl Sep 7, 2021

Choose a reason for hiding this comment

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

Why this change?

Copy link
Contributor Author

@cee-chen cee-chen Sep 7, 2021

Choose a reason for hiding this comment

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

If you check out the "Before" screenshot, left: 0 was presumably added to override left: -10000px being set by euiScreenReaderOnly CSS. If you remove the CSS from being loaded at all on this input, there's no need to set left: 0 - position absolute will typically float the element where it would originally have been placed

cursor: pointer;
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/form/radio/_radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
.euiRadio {
position: relative;

.euiRadio__input {
&:not(.euiRadio--noLabel) .euiRadio__input {
@include euiScreenReaderOnly;
}

.euiRadio__input {
~ .euiRadio__label {
display: inline-block;
padding-left: ($euiRadioSize * 1.5);
Expand Down Expand Up @@ -78,7 +80,6 @@
opacity: 0; /* 1 */
z-index: 1; /* 1 */
margin: 0; /* 1 */
left: 0; /* 1 */
cursor: pointer;
}
}
Expand Down