WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#35198 closed defect (bug) (invalid)

Adding this Widget and selecting "Display as Dropdown" will show the word Categories twice

Reported by: myBCN 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)

twentytwelve.png (11.3 KB) - added by swissspidy 5 years ago.
categories-widget-double-text.png (11.7 KB) - added by jeffmcneill 4 years ago.
screen-reader-text-class.png (20.2 KB) - added by jeffmcneill 4 years ago.
screen-test-css-fix.png (3.9 KB) - added by lukecavanagh 4 years ago.
screen-test-css-fix

Download all attachments as: .zip

Change History (12)

#1 @swissspidy
5 years ago

  • Keywords reporter-feedback added

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?

#2 @jeffmcneill
4 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 @swissspidy
4 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 @jeffmcneill
4 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. */
}

@lukecavanagh
4 years ago

screen-test-css-fix

#5 follow-up: @lukecavanagh
4 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.

Last edited 4 years ago by lukecavanagh (previous) (diff)

#6 in reply to: ↑ 5 ; follow-up: @afercia
4 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 @lukecavanagh
4 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 @afercia
4 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

Note: See TracTickets for help on using tickets.