[wp-trac] [WordPress Trac] #37013: Minor Fixes: "Toggle indicator" in pages have focus color while the same in widgets/menus have none.

[WordPress Trac]

#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


Comment:

 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.

 Accessibility improvement
 In these two commits targeting the Widgets page (HTML change):
 https://github.com/xwp/wordpress-
 develop/pull/222/commits/76b1f0815083831b7ffb5b68d9d3505d9d87bd26
 https://github.com/xwp/wordpress-
 develop/pull/222/commits/aeb2e2ec95fd04d34ee35a5f0d7a7d9aa6ee5b9d
 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
 with it.

 In this commit targeting the Menu accordion (HTML change):
 https://github.com/xwp/wordpress-
 develop/pull/222/commits/950fc0a026b720adf55471e9c77f66d433efdf42
 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:
 https://github.com/xwp/wordpress-
 develop/pull/222/commits/97cbb10ce204418d7763235a39b0687e4bec4c16

 In this commit targeting the Menu accordion (JS change):
 https://github.com/xwp/wordpress-
 develop/pull/222/commits/c44adff2767e974946302705452cf26aa01e87fb
 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
 accordions.
 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:
 https://github.com/xwp/wordpress-
 develop/pull/222/commits/553bb0ffb21b151bd8743163aee337e2896b5b99
 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