[wp-meta] [Making WordPress.org] #2670: FAQ toggles only on button click

[Making WordPress.org]

#2670: FAQ toggles only on button click
-----------------------------------------+------------------
 Reporter:  alpipego                     |       Owner:
     Type:  defect                       |      Status:  new
 Priority:  normal                       |   Milestone:
Component:  Plugin Directory             |  Resolution:
 Keywords:  has-screenshots ux-feedback  |
-----------------------------------------+------------------

Comment (by afercia):

 Chiming in by invitation :)
 First of all I'd consider if using a definition list is really necessary.
 Some screen readers have limited support for `<dl>` elements and they just
 get them as "list", sometimes announcing a wrong number of list items. See
 quick test here: http://codepen.io/afercia/full/PbQprv/

 Rich semantics adds a real value when software can get it and pass the
 information to people using that software. If this is not the case, it's
 just an academic discussion :) In this case maybe it doesn't add a real
 value and I'd consider to simplify the markup. Yes, sometimes definition
 lists make styling easier, but that's not a valid reason to choose a dl.

 I'd agree that the "arrow" should be clickable. Maybe just moving the CSS
 generated icon inside the button and adjusting the CSS would be enough.

 However, the CSS generated icon should be wrapped within a `span` element
 and hidden from assistive technologies using `aria-hidden="true"`. That's
 because some AT do try to announce the CSS generated content, as this is
 what the CSS 3 spec says.

 There are 2 `aria-expanded` attributes. The first one is on the `dt`
 element, the second one on the button. The former is a bit pointless since
 the `dt` is not focusable so it won't be announced. By the way, it's the
 only one that updates its value. Instead, the `aria-expanded` on the
 button is announced but it's always `false`.

 Screenshots:

 The question is expanded but aria-expanded is still false, thus screen
 readers announce "collapsed"

 [[Image(https://cldup.com/KNV1IlYnNG.png)]]

 CSS generated content announced (as "text element"):

 [[Image(https://cldup.com/orEMzXkCbF.png)]]

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