Control to view comments is inaccessible to keyboard

[aardrian]

Using the Accessibility page from the latest (2023) survey, the word balloon triggers to see comments (by launching the modal dialog) are inaccessible to keyboard users.

Specifically, the Accessibility section (which maps to features used) has onclick handlers on <div>s that cannot receive focus. All four can be confirmed with this XPath selector:

//div[contains(@class,"chart-comments")]

The Accessibility Pain Points section uses a similar pattern that is also inaccessible to keyboard users. The XPath is slightly different, so this will catch the two that are interactive:

//div[contains(@class,"chart-freeform-answers")][@data-state]

Please consider converting these to HTML <button> elements. The styling to retain the current look is negligible effort for the skills on this team, while the <button> is natively focusable, provides an appropriate role, will support keyboard users using only click events, and supports accessible names from a variety of methods (such as contents for this case).

Related, either add aria-hidden="true" to the nested SVG while populating the following sr-only node, or delete that node and give the SVG role="img" an aria-labelledby that references the "row" header, creating a compound name of [row header] [number].

[SachaG]

Thanks for the heads up. These all used to be plain text labels and I forgot to add a proper button element when I added the ability to click them. Fixing it now.