Opened 9 years ago
Closed 9 years ago
#35198 closed defect (bug) (invalid)
Adding this Widget and selecting "Display as Dropdown" will show the word Categories twice
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 4.4 |
Component: | Widgets | Keywords: | |
Focuses: | accessibility | Cc: |
Description
If you select Widgets and add Categories you will get the category widget with CATEGORY written in block letters. If you then tick "Display as Dropdown" will show the word Categories again, below the last one. If you customize the Title it will also display twice.
Attachments (4)
Change History (12)
#2
@
9 years ago
Apparently it is a class "screen-reader-text" that is invisible in some themes, but definitely not every theme. This is one case where assumed presence of a "screen-reader-text" set to invisible?
#3
@
9 years ago
- Focuses accessibility added
- Keywords close added; reporter-feedback removed
Thanks for the screenshots, @jeffmcneill!
That's correct, themes are ought to support .screen-reader-text
, since core uses that multiple times on the front-end (e.g. in get_search_form()
) and it's a general accessibility best practice.
See https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/ and https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
In the case of the categories widget, the label was added in [31520] to improve the overall accessibility of the default widget.
This is not a bug in core, but one in the theme. It should simply support the .screen-reader-text
CSS class.
#4
@
9 years ago
Ok, great. I dutifully added this CSS and looks like it works. @myBCN please try as well.
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { clip: auto !important; display: block; height: auto; left: 5px; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ }
#5
follow-up:
↓ 6
@
9 years ago
Did seem to work for me, just tested on a local dev trunk version. With TwentyTwelve at the active theme, with the custom CSS added.
#6
in reply to:
↑ 5
;
follow-up:
↓ 7
@
9 years ago
Replying to lukecavanagh:
Did not seem to work for me
@lukecavanagh what didn't work for you exactly? In your screenshot I see just one "Categories" title for the widget so seems everything is working fine.
#7
in reply to:
↑ 6
@
9 years ago
If that was all it was meant to be doing, then it worked fine then.
Replying to afercia:
Replying to lukecavanagh:
Did not seem to work for me
@lukecavanagh what didn't work for you exactly? In your screenshot I see just one "Categories" title for the widget so seems everything is working fine.
#8
@
9 years ago
- Keywords close removed
- Milestone Awaiting Review deleted
- Resolution set to invalid
- Status changed from new to closed
Yep, as pointed out in previous comments that's because when set to "Display as dropdown" the <select>
element needs a proper <label>
that uses a screen-reader-text
CSS class so it's visually hidden. Worth noting screen-reader-text
is included in the WordPress generated CSS classes that every theme should provide:
https://codex.wordpress.org/CSS#WordPress_Generated_Classes
Each Theme should have these or similar styles in its style.css
twentytwelve.png shows how the Categories widget looks like with Twenty Twelve. No title is being displayed twice.
@myBCN Can you please provide a screenshot as well? Does this still happen with all plugins deactivated and after switching to one of the default themes?