[wp-trac] [WordPress Trac] #58493: User Profile Page: Vertical spacing inconsistency between label and field on smaller screens (was: Bug Report - Vertical Spacing Inconsistency between the sub-title and the content below on the User Profile Page in responsive state)

[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 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;
   }
 }
 }}}

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