Make WordPress Core

Opened 10 months ago

Closed 6 months ago

#58493 closed defect (bug) (fixed)

User Profile Page: Vertical spacing inconsistency between label and field on smaller screens

Reported by: nandhuraj's profile nandhuraj Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version: 2.5
Component: Users Keywords: dev-feedback has-patch commit has-screenshots
Focuses: ui, accessibility, css Cc:

Description

There is an inconsistency in vertical spacing on the user profile page. Specifically, there is a noticeable difference in the vertical spacing between the sub-title and the content below it in the responsive state. It is essential to have uniform spacing throughout the website.

To help illustrate the issue, I have attached two sets of screenshots:

Screenshot Set1: This screenshots depicts the user profile page where the vertical spacing between the sub-title and the content below appears to be narrower than expected in the responsive state.

Screenshot Set 2: This screenshot showcases the desired and correct spacing observed under Settings in the General , Reading, Discussion pages.

Attachments (11)

Screenshot 2023-06-08 at 6.12.03 PM.png (20.3 KB) - added by nandhuraj 10 months ago.
Screenshot Set 1- User Profile Page
Screenshot 2023-06-08 at 6.09.34 PM.png (22.4 KB) - added by nandhuraj 10 months ago.
SET 1- User Profile Page
Screenshot 2023-06-08 at 6.07.35 PM.png (7.9 KB) - added by nandhuraj 10 months ago.
Screenshot set 2- Correct vertical spacing
Screenshot 2023-06-08 at 5.28.25 PM.jpg (12.4 KB) - added by nandhuraj 10 months ago.
Screenshot Set 2- Correct vertical spacing
Screenshot 2023-06-08 at 5.29.51 PM.jpg (32.7 KB) - added by nandhuraj 10 months ago.
Screenshot Set 2- Correct vertical spacing
Screenshot 2023-06-08 at 5.30.04 PM.jpg (17.9 KB) - added by nandhuraj 10 months ago.
Screenshot Set 2- Correct vertical spacing
58493.diff (5.6 KB) - added by sarath.ar 10 months ago.
58493.2.diff (694 bytes) - added by sarath.ar 10 months ago.
Untitled.jpeg (23.1 KB) - added by vivekawsm 7 months ago.
Less vertical spacing -User profile page
Untitled(1).jpeg (17.8 KB) - added by vivekawsm 7 months ago.
Untitled (1).jpeg (23.1 KB) - added by vivekawsm 7 months ago.
After patch

Download all attachments as: .zip

Change History (23)

#1 @costdev
10 months ago

  • Focuses coding-standards removed

@nandhuraj
10 months ago

Screenshot Set 1- User Profile Page

@nandhuraj
10 months ago

SET 1- User Profile Page

@nandhuraj
10 months ago

Screenshot set 2- Correct vertical spacing

@nandhuraj
10 months ago

Screenshot Set 2- Correct vertical spacing

@nandhuraj
10 months ago

Screenshot Set 2- Correct vertical spacing

@nandhuraj
10 months ago

Screenshot Set 2- Correct vertical spacing

#2 @costdev
10 months ago

  • Focuses accessibility added
  • Keywords dev-feedback added
  • Version changed from 6.2.2 to 2.5

Hi @nandhuraj, welcome to Trac and thanks for opening this ticket!

The User Profile screen has td > label > input, whereas the other screens have td > fieldset > label > input. However, the <fieldset> elements on these screens also contain <legend class="screen-reader-text">. I also tried using <p>, but this increases the spacing too much.

@sabernhardt Rather than having a <fieldset> with only one child element, do you have any thoughts on whether we should add <legend class="screen-reader-text"> here, similar to the other screens?


  • I believe this was introduced in [7214] when such fields were wrapped with table > tr > td instead of p tags. Setting the Version property to 2.5.
  • Adding the accessibility focus and dev-feedback regarding my question above.
Last edited 10 months ago by costdev (previous) (diff)

@sarath.ar
10 months ago

#3 follow-up: @sabernhardt
10 months ago

  • Summary changed from Bug Report - Vertical Spacing Inconsistency between the sub-title and the content below on the User Profile Page in responsive state to User Profile Page: Vertical spacing inconsistency between label and field on smaller screens

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

@sarath.ar
10 months ago

#4 in reply to: ↑ 3 @sarath.ar
10 months ago

Replying to 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

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


9 months ago

#6 @joedolson
9 months ago

  • Milestone changed from Awaiting Review to 6.4
  • Owner set to joedolson
  • Status changed from new to accepted

#7 @oglekler
7 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

#8 @vivekawsm
7 months ago

Test Report

I tested this on WordPress 6.3
The issue seems to be gone after applying the patch.
Below is the test report. Attaching images for reference as well.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/58493/58493.2.diff

Environment
WordPress: 6.3
PHP: 7.4.33
Server: TasteWP-S3 Official/3.0.0
Database: mysqli (Server: 8.0.32-0ubuntu0.20.04.2 / Client: mysqlnd 7.4.33)
Browser: Chrome 116.0.0.0 (Windows 10/11)
Theme: Twenty Twenty-Three 1.2
MU-Plugins: None activated
Plugins:
WordPress Beta Tester 3.5.3

Actual Results

Issue resolved with patch..

Last edited 7 months ago by vivekawsm (previous) (diff)

@vivekawsm
7 months ago

Less vertical spacing -User profile page

@vivekawsm
7 months ago

After patch

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


6 months ago

#10 @joedolson
6 months ago

  • Keywords commit added; needs-testing removed

#11 @joedolson
6 months ago

  • Keywords has-screenshots added

#12 @joedolson
6 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 56636:

Users: Improve vertical spacing consistency in labels.

Adjust display of user profile labels on small screens so they are consistent with the layout used elsewhere.

Props nandhuraj, costdev, sabernhardt, sarathar, vivekawsm.
Fixes #58493.

Note: See TracTickets for help on using tickets.