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 | Owned by: | 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)
Change History (23)
#2
@
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 ofp
tags. Setting theVersion
property to2.5
. - Adding the
accessibility
focus anddev-feedback
regarding my question above.
#3
follow-up:
↓ 4
@
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; } }
#4
in reply to:
↑ 3
@
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 collapsedFor 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
@
9 months ago
- Milestone changed from Awaiting Review to 6.4
- Owner set to joedolson
- Status changed from new to accepted
#8
@
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..
Screenshot Set 1- User Profile Page