[wp-trac] [WordPress Trac] #37013: Minor Fixes: "Toggle indicator" in pages have focus color while the same in widgets/menus have none.
noreply at wordpress.org
Wed May 3 14:28:18 UTC 2017
#37013: Minor Fixes: "Toggle indicator" in pages have focus color while the same in
widgets/menus have none.
Reporter: monikarao | Owner: afercia
Type: defect (bug) | Status: assigned
Priority: normal | Milestone: 4.8
Component: Widgets | Version:
Severity: normal | Resolution:
Keywords: has-patch has-screenshots needs- | Focuses: ui,
testing | accessibility
Changes (by mihai2u):
* keywords: has-patch has-screenshots needs-testing needs-refresh => has-
patch has-screenshots needs-testing
I've refreshed the patch with the latest in master. There were 2 small
conflicts on common.css which I've handled easily, and created a quick
video showing the widgets page now navigating through both the widget
areas and the widgets themselves (as part of the improvements in #31476)
and they play nice together.
The menus still work like in the previous video I uploaded, so we're also
good on that front.
Now to make it easier for you to go through this, I'll go through the code
changes to explain what I did.
In these two commits targeting the Widgets page (HTML change):
I replaced the div which was only used as a graphic representation of the
state of the box with a button, because we want to be able to interact
In this commit targeting the Menu accordion (HTML change):
I removed the tabindex from the H3 element, and deleted the span that was
showing the arrow state.
Instead I added inside the H3 element the button, because it's a better
user experience to be able to highlight the arrow instead of the entire
heading when focusing with the keyboard. This way it doesn't get confused
with the currently open accordion heading.
In the following related commit I added back the hndle class, which was
needed for styling purposes:
In this commit targeting the Menu accordion (JS change):
I added the .handlediv (the buttons I added used this class) to the JS
selector in order to allow it to handle the expanding / closing of the
To the comment regarding buttons not needing the keydown event, I am aware
this isn't necessary for the current modern browsers, but since the code
was already there, I thought it might be targeting some IE relative, and
didn't want to introduce a potential bug, going by the don't fix it if it
ain't broken philosophy.
In this commit all of the styling changes are pulled together:
I'll go through the changes here in no particular order:
- with the introduction of the .handlediv I styled the arrow inside it
(closed / open states)
- moved the content: "\f142" from the collapse arrow indicator in a
separate set of selectors in order to allow it to be easily reused on
other places where it might be needed. It's a tiny code refactoring which
makes things more readable with the icon having the open state / closed
state comments before it.
- the old sidebar arrow had been replaced, some selectors/styles which
used to be connected to it got removed
- the metabox-holder styles section represents the new styles connected to
the arrow button in the menu
- the sidebar / widgets .handlediv styles section represents the styles
connected to the arrow button and its focus state on the widgets page
Hope it will be easy to follow along the code with my indications and
links to individual git commits.
I'll upload the refreshed patch next.
Ticket URL: <https://core.trac.wordpress.org/ticket/37013#comment:21>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac