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

[ui5-checkbox]: broken focus when width is set #10566

Open
1 task done
nnaydenow opened this issue Jan 15, 2025 · 0 comments · May be fixed by #10639
Open
1 task done

[ui5-checkbox]: broken focus when width is set #10566

nnaydenow opened this issue Jan 15, 2025 · 0 comments · May be fixed by #10639
Assignees
@kgogov
Labels
bug This issue is a bug in the code TOPIC P

Comments

@nnaydenow
Copy link
Contributor

Bug Description

Focus should be applied only around checkmark container and respective text if it is provided.

Image

Image

Affected Component

ui5-checkbox

Expected Behaviour

Apply focus around checkmark container and text as it is in ui5-switch and ui5-radio-button and don't depend on the width that is set to the component if content can't stretch.

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuXG5cblxuXG5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-XG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuICAgIFxuXHQ8ZGl2IHN0eWxlPVwid2lkdGg6IDUwJTsgbWFyZ2luOiBhdXRvOyBib3JkZXI6IDFweCBzb2xpZCBibGFjazsgcGFkZGluZzogMXJlbTtcIj5cblx0XHQ8ZGl2PlxuXHRcdFx0PHVpNS1jaGVja2JveCBzdHlsZT1cIndpZHRoOiAxMDAlOyBib3JkZXI6IDFweCBzb2xpZCByZWQ7XCI-PC91aTUtY2hlY2tib3g-XG5cdFx0PC9kaXY-XG5cdFx0PGRpdj5cblx0XHRcdDx1aTUtcmFkaW8tYnV0dG9uIHN0eWxlPVwid2lkdGg6IDEwMCU7IGJvcmRlcjogMXB4IHNvbGlkIHJlZDtcIj48L3VpNS1yYWRpby1idXR0b24-XG5cdFx0PC9kaXY-XG5cdFx0PGRpdj5cblx0XHRcdDx1aTUtc3dpdGNoIHN0eWxlPVwid2lkdGg6IDEwMCU7IGJvcmRlcjogMXB4IHNvbGlkIHJlZDtcIj48L3VpNS1zd2l0Y2g-XG5cdFx0PC9kaXY-XG5cdFx0PGhyIC8-XG5cdFx0PGRpdj5cblx0XHRcdDx1aTUtY2hlY2tib3ggc3R5bGU9XCJ3aWR0aDogMTAwJTsgYm9yZGVyOiAxcHggc29saWQgcmVkO1wiIHRleHQ9XCJTb21lIHRleHRcIj48L3VpNS1jaGVja2JveD5cblx0XHQ8L2Rpdj5cblx0XHQ8ZGl2PlxuXHRcdFx0PHVpNS1yYWRpby1idXR0b24gc3R5bGU9XCJ3aWR0aDogMTAwJTsgYm9yZGVyOiAxcHggc29saWQgcmVkO1wiIHRleHQ9XCJTb21lIHRleHRcIj48L3VpNS1yYWRpby1idXR0b24-XG5cdFx0PC9kaXY-XG5cdFx0PGRpdj5cblx0XHRcdDx1aTUtc3dpdGNoIHN0eWxlPVwid2lkdGg6IDEwMCU7IGJvcmRlcjogMXB4IHNvbGlkIHJlZDtcIj48L3VpNS1zd2l0Y2g-XG5cdFx0PC9kaXY-XG5cdDwvZGl2PlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvQ2hlY2tCb3guanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1JhZGlvQnV0dG9uLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9Td2l0Y2guanNcIjtcbiJ9fQ

Steps to Reproduce

  1. Open provided snippix
  2. Click box where ui5-checkbox is used
  3. Observe that the focus applied to the whole box
    ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

nightly

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@nnaydenow nnaydenow added bug This issue is a bug in the code TOPIC P labels Jan 15, 2025
@kgogov kgogov self-assigned this Jan 15, 2025
@kgogov kgogov moved this from Issues to In Progress in Maintenance - Topic P Jan 15, 2025
kgogov added a commit that referenced this issue Jan 23, 2025
@kgogov
fix(ui5-checkbox): ensure consistent focus behavior
cc07486 
Ensure focus is applied consistently around the checkbox container and
respective text, aligning behavior with other components.

Fixes #10566
@kgogov kgogov linked a pull request Jan 23, 2025 that will close this issue
Open
kgogov added a commit that referenced this issue Jan 23, 2025
@kgogov
fix(ui5-checkbox): ensure consistent focus behavior
4af25be 
Ensure focus is applied consistently around the checkbox container and
respective text, aligning behavior with other components.

Fixes #10566
kgogov added a commit that referenced this issue Jan 23, 2025
@kgogov
fix(ui5-checkbox): ensure consistent focus behavior
9eb764c 
Ensure focus is applied consistently around the checkbox container and
respective text, aligning behavior with other components.

Fixes #10566
kgogov added a commit that referenced this issue Jan 27, 2025
@kgogov
fix(ui5-checkbox): ensure consistent focus behavior
f8fe5ba 
Ensure focus is applied consistently around the checkbox container and
respective text, aligning behavior with other components.

Fixes #10566
kgogov added a commit that referenced this issue Jan 30, 2025
@kgogov
fix(ui5-checkbox): ensure consistent focus behavior
2863bb7 
Ensure focus is applied consistently around the checkbox container and
respective text, aligning behavior with other components.

Fixes #10566
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kgogov kgogov

Labels
bug This issue is a bug in the code TOPIC P
Projects
Maintenance - Topic P
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui5-checkbox): ensure consistent focus behavior SAP/ui5-webcomponents
2 participants
@nnaydenow @kgogov