WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years 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:

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

Download all attachments as: .zip

Change History (32)

@afercia
2 years ago

Search results

@afercia
2 years ago

Search results with no results

@afercia
2 years ago

Archive page example

@ianbelanger
2 years ago

First attempt to fix the issues

#1 @ianbelanger
2 years ago

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

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


2 years ago

#4 @kjellr
2 years ago

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

@kjellr
2 years ago

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


2 years ago

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

#8 @afercia
2 years 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
2 years 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
2 years 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
2 years 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 years ago

#13 @afercia
2 years ago

  • Keywords commit added; needs-testing removed

#14 @afercia
2 years 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 years ago

@kjellr
2 years ago

#16 @kjellr
2 years 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 years ago

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

#18 @audrasjb
2 years ago

  • Keywords commit added

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


2 years ago

#20 @afercia
2 years 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 years ago

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