WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 3 weeks ago

#47140 new defect (bug)

Twenty Nineteen: Improve the special pages headings

Reported by: afercia Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch needs-testing
Focuses: accessibility Cc:

Description

Heading in some special pages (search, no content, archives) have rooms for improvements both from an accessibility and layout perspective.

Search page:

Current code: https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentynineteen/search.php?rev=44149&marks=21-24#L20

<h1 class="page-title">
	<?php _e( 'Search results for:', 'twentynineteen' ); ?>
</h1>
<div class="page-description"><?php echo get_search_query(); ?></div>

This prints out a h1 heading "Search results for:" that doesn't help so much users of assistive technologies. The heading should include the search term. This way, users would have a proper feedback when navigating by headings.

Worth also noting that the document title becomes:
<title>You searched for hello &#8902; WordPress develop</title>

The wording could be improved. Users know they searched for {search term} because that's what they just did.

Search page with no results:

The heading position is a bit off. See attached screenshot.

404 page (no content):

The heading position is a bit off. See attached screenshot.

Archive pages:

The vertical spacing between the archives heading and the page content is a bit too much, not sure this is intentional. See attached screenshot.
Note that in this case, the archive description is part of the heading: this same pattern should be used for the search term mentioned above.

Attachments (9)

01 Twenty Nineteen search results.png (21.4 KB) - added by afercia 2 months ago.
Search results
02 Twenty Nineteen no search results heading.png (232.6 KB) - added by afercia 2 months ago.
Search results with no results
03 Twenty Nineteen 404 page heading.png (170.5 KB) - added by afercia 2 months ago.
page 404
04 Twenty Nineteen archives heading.png (190.8 KB) - added by afercia 2 months ago.
Archive page example
47140.diff (4.2 KB) - added by ianbelanger 5 weeks ago.
First attempt to fix the issues
47140-archive-after-patch.PNG (34.4 KB) - added by ianbelanger 5 weeks ago.
47140-no-content-after-patch.PNG (35.5 KB) - added by ianbelanger 5 weeks ago.
47140-search-after-patch.PNG (82.1 KB) - added by ianbelanger 5 weeks ago.
47140-search-no-results-after-patch.PNG (32.5 KB) - added by ianbelanger 5 weeks ago.

Download all attachments as: .zip

Change History (11)

@afercia
2 months ago

Search results

@afercia
2 months ago

Search results with no results

@afercia
2 months ago

Archive page example

@ianbelanger
5 weeks ago

First attempt to fix the issues

#1 @ianbelanger
5 weeks ago

  • Keywords has-patch needs-testing added
  • Milestone changed from Awaiting Review to 5.3

#2 @kjellr
3 weeks ago

Patch looks good on my end, @ianbelanger! Tested on Safari and FF on MacOS 10.14.5, across various breakpoints.

The only suggestion I have is in search.php: should we change the page-description div into a span instead? That would align with the use of that tag in the Category, Tag, and Archive page templates.

Thanks!

Note: See TracTickets for help on using tickets.