[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:  needs-post-mortem        |     Focuses:  accessibility,
  wpcampus-report has-screenshots    |  javascript
  semantic-buttons has-patch         |
-------------------------------------+-------------------------------------

Comment (by afercia):

 @mikeschroder thanks for the link :) It took me a while to understand I
 had to test with the Shortcake plugin ''and at least'' the Shortcode UI
 Example plugin to actually see how it works.

 So basically Shortcake reuses the media modal to insert and manage content
 that is not strictly "media". I'm not sure this is a good idea in the
 first place as many things in the media views and the media modal UI are
 specifically designed for ''media''. Headings, visually hidden text,
 labels, can't take into consideration content different from media. The
 media views ar not part of a formalized API and, though they're
 extensible, they're still designed exclusively for media.

 That said, as far as I see Shortcake uses two frames: the "add" one and
 the "edit details" one.

 The "add" one adds an "Insert Post Element" menu item and content:

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

 This is definitely not only "media". It's used to insert also shortcodes,
 or a Facebook post, or a Pullquote etc.. To me, it doesn't seem
 appropriate and contributes to a bad user experience in my opinion.
 Regardless, I still agree the toggle menu button and the heading need a
 better text.

 Aside: the ARIA tabs pattern works correctly also with the "Insert Post
 Element" menu item.

 In the "edit details" frame it's interesting how Shortcake allows to open
 an additional modal from the main modal (see screenshot where I shifted
 one of the modals to reveal the underlying one). Not sure this is good UI
 and UX:

 [[Image(http://cldup.com/KXqPwsaA-G.png)]]

 Notice on the left the inputs and buttons with the new styles look OK.

 It is important to note that in the "edit details" frame the heading,
 toggle button, and menu are hidden with `display: none` thus they're not a
 problem. This is because the ARIA tabs implementation and the heading take
 into consideration the `hide-menu` state of the frame view.

 Lastly, Shortcake uses `select2` to replace native `<select>` elements.
 The new CSS conflicts a bit with the select2 one and there's a minor
 visual glitch but select2 is still functional and can be used without any
 breakage. The minor CSS glitch should be addressed on the Shortcake side.

 Worth also noting that it doesn't seem to me Shortcake is so actively
 maintained. For example, when typing into the "Select Page" field the
 popup placement is wrong: the instructions popup and the suggestions popup
 appear completely out of place, also on WordPress 5.2:

 Screenshot from WordPress 5.2:

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

 Overall, I don't see serious breakages in Shortcake produced by the admin
 CSS changes.

 Re: improving the button and heading wording: I'll take the responsibility
 to prepare two patches: on this ticket and on #47610.

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