[wp-trac] [WordPress Trac] #47149: Tab structure does not use tab semantics

[WordPress Trac]

#47149: Tab structure does not use tab semantics
-------------------------------------+-------------------------------------
 Reporter:  anevins                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.3
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  wpcampus-report has-     |     Focuses:  accessibility,
  screenshots semantic-buttons       |  javascript
  needs-patch                        |
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:
     wpcampus-report has-screenshots semantic-buttons has-patch needs-
     refresh
     => wpcampus-report has-screenshots semantic-buttons needs-patch


Comment:

 Work is progressing. I'm working on the menu toggle in the responsive
 view: the H1 heading is now just a heading and I added a button to toggle
 the menu.

 I'd need some feedback on the best option for best visual order / DOM
 order. The styling is temporary, please focus on the order issue :)

 Option 1:
 - button placed in the most intuitive spot from a visual perspective
 - unfortunately, the heading is between the toggle and the menu: in the
 DOM the menu doesn't immediately follow the toggle

 [[Image(http://cldup.com/Jd_ZdqnxXB.png)]]

 Option 2:
 - button placed after the heading
 - DOM order is ideal
 - visually: not great because button and menu are "disconnected"
 - also: the heading text length varies depending on the selected view thus
 the button "jumps" horizontally when selecting a menu item

 [[Image(http://cldup.com/GGQGx5wHos.png)]]

 Option 3:
 - everything moved to the right
 - DOM order is ideal
 - there's no "jump"
 - maybe not great visually
 - could be out of view at high magnification levels (proximity)

 Feedback and suggestions for alternative options welcome.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47149#comment:28>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform