[wp-meta] [Making WordPress.org] #2776: Plugin Directory: Improve responsive design of tabs

[Making WordPress.org]

#2776: Plugin Directory: Improve responsive design of tabs
-------------------------------------------------+-------------------------
 Reporter:  kevinwhoffman                        |       Owner:  (none)
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:
Component:  Plugin Directory                     |  Resolution:
 Keywords:  ui-feedback ux-feedback has-         |
  screenshots has-patch                          |
-------------------------------------------------+-------------------------
Changes (by ck3lee):

 * keywords:  ui-feedback ux-feedback has-screenshots needs-patch => ui-
     feedback ux-feedback has-screenshots has-patch


Comment:

 Hi @kevinwhoffman @mapk @jb510 @tellyworth,

 I’m taking a stab at this old ticket, with the primary goal to improve
 accessibility for tab navigation and simplifying the CSS. Please have a
 look at attachment:2776.diff. Let me know what you think. Happy to make
 changes/fix if necessary.

 Current state:
 * Tab buttons and tab panels are missing appropriate `aria` attributes.
 * Using `anchor` as tab buttons can be confusing - tab does not link to
 another page.
 * `Support` links to another page but it looks like a tab button.

 Proposed:
 * Add appropriate aria attributes.
 * Use `button` for tab buttons.
 * Style Support link as a link.
 * Move Support link to the the most right.
 * Wrap tab buttons using `flex` for responsiveness.
 * Implement the tab switching in JavaScript, instead of CSS.

 Notes:
 * I'm using `flex` for responsiveness to keep things simple. Definitely
 not as nice as mapk’s JS approach.
 * I usually shy away from JS to calculate width and handle resizing. But,
 I can implement the JS approach if you think flex/wrapping approach is not
 good enough for responsiveness.
 * Kept the handling of `#` to open target tab on page load.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/2776#comment:23>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org