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 | Owned by: | 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)
Change History (11)
#1
@
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
@
10 years ago
- Keywords needs-patch added; has-patch removed
- Milestone changed from Awaiting Review to 4.1
#3
@
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
@
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.
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.