[wp-trac] [WordPress Trac] #58493: User Profile Page: Vertical spacing inconsistency between label and field on smaller screens

[WordPress Trac]

#58493: User Profile Page: Vertical spacing inconsistency between label and field
on smaller screens
--------------------------------------+------------------------------------
 Reporter:  nandhuraj                 |       Owner:  (none)
     Type:  defect (bug)              |      Status:  new
 Priority:  normal                    |   Milestone:  Awaiting Review
Component:  Users                     |     Version:  2.5
 Severity:  normal                    |  Resolution:
 Keywords:  needs-patch dev-feedback  |     Focuses:  ui, accessibility,
                                      |  css
--------------------------------------+------------------------------------

Comment (by sarath.ar):

 Replying to [comment:3 sabernhardt]:
 > Fieldsets are intended for grouped fields, so a single checkbox in a
 fieldset possibly could confuse screen reader users. I do not recommend
 changing the markup //only// to make the spacing more consistent.
 >
 > Testing 58493.diff in Firefox, NVDA reads the header cell's text and the
 word "grouping" as I tab to each checkbox. (I thought I might also hear "1
 of 1" but did not.)
 > {{{
 > Visual Editor  grouping  clickable  Disable the visual editor when
 writing  check box  checked
 > Syntax Highlighting  grouping  clickable  Disable syntax highlighting
 when editing code  check box  not checked
 > Admin Color Scheme  grouping
 > Default  radio button  checked  1 of 9
 > Keyboard Shortcuts  grouping  clickable  Enable keyboard shortcuts for
 comment moderation.  check box  not checked
 > Documentation on Keyboard Shortcuts  link
 > Toolbar  grouping  clickable  Show Toolbar when viewing site  check box
 checked
 > Language  combo box  Site Default  collapsed
 > }}}
 >
 > For a CSS-only solution, the styles could target the `label` immediately
 inside the table cell. The `:first-child` selector prevents it from
 affecting any labels that follow the checkbox input.
 > {{{
 > @media screen and (max-width: 782px) {
 >   .form-table td > label:first-child {
 >     display: inline-block;
 >     margin-top: 0.35em;
 >   }
 > }
 > }}}


 Hi,

 Uploaded a patch with the CSS-only solution suggested.

 Thank you

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58493#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform