Make WordPress Core

Opened 10 years ago

Closed 10 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's profile rianrietveld Owned by: johnbillion's profile johnbillion
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords: has-patch commit
Focuses: accessibility Cc:

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 10 years ago.
30110.1.diff (1.2 KB) - added by mattwiebe 10 years ago.

Download all attachments as: .zip

Change History (11)

@rianrietveld
10 years ago

#1 @rianrietveld
10 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
10 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
10 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
10 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
10 years ago

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


10 years ago

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


10 years ago

#7 @iandstewart
10 years ago

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

#8 @johnbillion
10 years ago

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

#9 @johnbillion
10 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.