WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 2 months ago

Last modified 2 months ago

#47140 closed defect (bug) (fixed)

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:
PR Number:

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 (11)

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

Download all attachments as: .zip

Change History (32)

@afercia
7 months ago

Search results

@afercia
7 months ago

Search results with no results

@afercia
7 months ago

Archive page example

@ianbelanger
5 months ago

First attempt to fix the issues

#1 @ianbelanger
5 months ago

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

#2 @kjellr
5 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.


3 months ago

#4 @kjellr
3 months ago

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

@kjellr
3 months ago

#5 @kjellr
3 months 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 months ago

#7 @nrqsnchz
3 months 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 months ago by nrqsnchz (previous) (diff)

#8 @afercia
3 months 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 months 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 months 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 months 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.


2 months ago

#13 @afercia
2 months ago

  • Keywords commit added; needs-testing removed

#14 @afercia
2 months 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;
        }

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


2 months ago

@kjellr
2 months ago

#16 @kjellr
2 months ago

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.

#17 @audrasjb
2 months ago

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

#18 @audrasjb
2 months ago

  • Keywords commit added

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


2 months ago

#20 @afercia
2 months ago

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

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.

#21 @afercia
2 months ago

  • Keywords commit removed
Note: See TracTickets for help on using tickets.