WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 22 hours ago

#47140 assigned defect (bug)

Twenty Nineteen: Improve the special pages headings

Reported by: afercia Owned by: kjellr
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch
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 (10)

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

Download all attachments as: .zip

Change History (24)

@afercia
5 months ago

Search results

@afercia
5 months ago

Search results with no results

@afercia
5 months ago

Archive page example

@ianbelanger
3 months ago

First attempt to fix the issues

#1 @ianbelanger
3 months ago

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

#2 @kjellr
3 months 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!

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


4 weeks ago

#4 @kjellr
4 weeks ago

  • Owner set to kjellr
  • Status changed from new to assigned

@kjellr
4 weeks ago

#5 @kjellr
4 weeks ago

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.

I added 47140.1.diff, which includes this update. If someone wouldn't mind testing — I think this should be just about ready to ship!

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


3 weeks ago

#7 @nrqsnchz
3 weeks ago

Testing 47140.1.diff. I wasn't able to get the 404 (Nothing found) when typing a non-existent URL page (like http://trunk.wordpress.test/test.html). Should I be testing it in a different way?

I also got an empty search results page when searching an empty field:

https://cldup.com/3go0pWPhqU.png

Last edited 3 weeks ago by nrqsnchz (previous) (diff)

#8 @afercia
3 weeks ago

Not sure. Did you check your Permalink settings? Try to set it to "Post name". Then, something like

http://trunk.wordpress.test/qwerty

should display the 404 page.

#9 @nrqsnchz
3 weeks ago

Try to set it to "Post name".

Thanks @afercia, that was it.


@kjellr what should I be expecting to see when searching for an empty string?

#10 @kjellr
3 weeks ago

@kjellr what should I be expecting to see when searching for an empty string?

What you're seeing above is about what I'd expect. Generally if you search for an empty string WordPress will just return all posts. Here are some examples from previous themes:

https://twentyseventeendemo.wordpress.com/?s=
https://twentysixteendemo.wordpress.com/?s=

Style-wise though, I do believe that after this patch is applied, that extra period appended to the search query should disappear (It took me a couple hard refreshes to inherit the new styles):

https://cldup.com/rVnakOL_Rs.png


The main things to look for after applying this patch are:

Search Results Page

Ensure that the entire heading Search results for: %searchterm% is wrapped in a single <h1> tag.

Search Results Page (With no results)

The heading should be properly aligned.

Before: 02 Twenty Nineteen no search results heading.png
After: 47140-search-no-results-after-patch.PNG

404 Page

Ensure that the heading is properly aligned.

Before: 03 Twenty Nineteen 404 page heading.png
After: 47140-no-content-after-patch.PNG

Archive Pages

Ensure that the entire heading (eg. Yearly archives: 2019) is wrapped in a single <h1> tag. And that the space between the heading and the posts is consistent with the spacing on the search results page.

Before: 04 Twenty Nineteen archives heading.png
After: 47140-archive-after-patch.PNG

#11 @nrqsnchz
3 weeks ago

@kjellr Thanks for the clarification. I was able to test and confirm that the patch behaves as expected.

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


13 days ago

#13 @afercia
13 days ago

  • Keywords commit added; needs-testing removed

#14 @afercia
22 hours ago

  • Keywords commit removed

Quickly reviewed the patch. Maybe I'm missing something but why the CSS pseudo generated content "dot" of the search term keeps some styling? There's no content property any longer, not sure those styles are still used? /Cc @kjellr

        &:after {
-            content: ".";
             font-weight: bold;
             color: $color__text-light;
        }
Note: See TracTickets for help on using tickets.