Twenty Nineteen: Improve the special pages headings

[afercia]

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.

[afercia]

Search results

[afercia]

Search results with no results

[afercia]

page 404

[afercia]

Archive page example

[ianbelanger]

First attempt to fix the issues

[kjellr]

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!

[kjellr]

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!

[nrqsnchz]

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

[afercia]

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.

[nrqsnchz]

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?

[kjellr]

@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):

---

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​

[nrqsnchz]

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

[afercia]

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

[kjellr]

Great catch, @afercia! I've uploaded a new patch (47140.2.diff​) that removes those styles. Could use one more test, but after that I think it's probably good to go.

[audrasjb]

Tested yesterday: the patch works fine and addresses the issues raised by @afercia.

[afercia]

In 46234:

Accessibility: Twenty Nineteen: Improve the special pages headings.

Improves information provided by the headings, their alignment and spacing in the following special pages:

• search page with and without search results
• 404 page (no content)
• archive pages

Props ianbelanger, kjellr, nrqsnchz, audrasjb.
Fixes #47140.