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

Combobox example's text doesn't fit in its input element on Safari iOS #2778

Closed
mxmason opened this issue Aug 12, 2023 · 2 comments · Fixed by #2780
Closed

Combobox example's text doesn't fit in its input element on Safari iOS #2778

mxmason opened this issue Aug 12, 2023 · 2 comments · Fixed by #2780
Assignees
@andreancardona
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern QA for APG Examples Related to improve the quality and the acceptance of APG examples
Milestone
H2/2023 Content U...

Comments

@mxmason
Copy link

mxmason commented Aug 12, 2023 •
edited
Loading

Summary

Just as it says on the tin! In Safari iOS, the combobox input's text is too tall for the combobox input. One solution might be to stop manually setting the height of the input to 24px, allowing the input to occupy the height it needs. It then has plenty of room for the cursor. I'm happy to submit a PR to fix this!

Screenshots

The screenshots in this table compare the current state of the combobox with one possible fix.

Current (has explicit height) Possible fix (no explicit height)
The APG combobox with text partly obscured by the input A taller version of the APG combobox, text inside fully visible
@mxmason mxmason changed the title Combobox input's text doesn't fit in the bounds of the input element on Safari iOS Combobox example's text doesn't fit in its input element on Safari iOS Aug 12, 2023
@a11ydoer a11ydoer added bug Code defects; not for inaccurate prose QA for APG Examples Related to improve the quality and the acceptance of APG examples Example Page Related to a page containing an example implementation of a pattern labels Aug 22, 2023
@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Combobox example's text doesn't fit in its input element on Safari iOS.

The full IRC log of that discussion <jugglinmike> Subtopic: Combobox example's text doesn't fit in its input element on Safari iOS
<jugglinmike> github: https://github.com//issues/2778
<Jem> https://github.com//issues/2778
<jugglinmike> andrea: I can review this. I'll try to reproduce it and weigh in about the suggested fix
<jugglinmike> Jem: I'll add the "bug" label and the "example pattern implementation" label and the "qa for apg examples" label
<Jem> https://github.com//issues/2773

@andreancardona andreancardona mentioned this issue Aug 28, 2023
Merged
2 tasks
@mcking65 mcking65 added this to the ARIA 1.3 Additions milestone Sep 19, 2023
mcking65 pushed a commit that referenced this issue Oct 2, 2023
@andreancardona
Multiple Combobox Examples: Adjust input height so text is fully visi…
2b619c1 
…ble in Safari on iOS (pull #2780)

Resolves #2778 by revising CSS for the following 4 combobox examples so that the space for the input is tall enough to fit the text when viewed in Safari on iOS. Previously, the tops of the letters were chopped off.
* Editable Combobox With Both List and Inline Autocomplete
* Editable Combobox With List Autocomplete
* Editable Combobox without Autocomplete
* Editable Combobox with Grid Popup
@mcking65
Copy link
Contributor

mcking65 commented Oct 2, 2023

@mxmason Thank you for reporting this bug. The fix has landed via PR #2780 and will be in tomorrow's publication.

Thank you @andreancardona and @ariellalgilmore for working on the fix!!

@howard-e howard-e mentioned this issue Oct 2, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andreancardona andreancardona

Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern QA for APG Examples Related to improve the quality and the acceptance of APG examples
Projects
Combobox Patterns and Examples Development Project
Status: Complete
Milestone
H2/2023 Content Updates
5 participants
@mcking65 @mxmason @a11ydoer @css-meeting-bot @andreancardona