WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30110 closed defect (bug) (fixed)

Twenty Fifteen: The search submit button CSS is display: none; That should be CSS like screen reader only.

Reported by: rianrietveld Owned by: johnbillion
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords: has-patch commit
Focuses: accessibility Cc:
PR Number:

Description

The search widgets has a class search-submit hiding the submit button with display:none;

.search-form input[type="submit"] {
display: none;
}

This way the button is always hidden, also for all assistive technology.

Maybe it's better to change that into a screen-reader-only functionality by adding the class name to the screen-reader-tex definition in style.css, like

.screen-reader-text, .search-form input[type="submit"] {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

Attachments (2)

30110.patch (834 bytes) - added by rianrietveld 5 years ago.
30110.1.diff (1.2 KB) - added by mattwiebe 5 years ago.

Download all attachments as: .zip

Change History (11)

@rianrietveld
5 years ago

#1 @rianrietveld
5 years ago

  • Keywords has-patch added
  • Summary changed from Twenty Fifteen: The search submit button class is display: none; That should be a class screen reader only. to Twenty Fifteen: The search submit button CSS is display: none; That should be CSS like screen reader only.

#2 @johnbillion
5 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Awaiting Review to 4.1

Thanks for the patch Rian!

I think a better way to address this is to add the screen-reader-text class to the search submit button. That way we stick to one class for screen reader text and use it on all elements which act as assistive text for screen readers.

#3 @rianrietveld
5 years ago

But wouldn't add the class screen-reader-text to the search submit button influence other themes, that maybe have a visible submit button, because the search form is a core widget in general-tempate.php?

#4 @mattwiebe
5 years ago

The search form would have to be implemented locally for the theme with a searchform.php file to customize the markup to achieve the desired result, or we could use the get_search_form filter.

Patch incoming for the latter. Otherwise Rian's patch (except for the font-family error) would work for me.

@mattwiebe
5 years ago

This ticket was mentioned in Slack in #core-themes by kraft. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-themes by iandstewart. View the logs.


5 years ago

#7 @iandstewart
5 years ago

  • Keywords has-patch commit added; needs-patch removed

#8 @johnbillion
5 years ago

This isn't ideal, but it saves us redefining the search form via searchform.php.

#9 @johnbillion
5 years ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from new to closed

In 30053:

Make the Twenty Fifteen search form submit button screen reader accessible rather than hidden to all users. Fixes #30110. Props mattweibe, rianrietveld.

Note: See TracTickets for help on using tickets.