[Accessibility]: Problems with charts' dialogs

[wkeese]

Name

Bill Keese

Are you an IBM employee?

• Yes

Contact Details

[email protected]

Environment

Automated testing tool and ruleset

What happened? What did you expect to happen instead?

Every subclass of Chart creates a Modal like

<div class="cds--modal cds--modal" data-modal="true" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description" tabindex="-1"></div>

This was apparently designed for accessibility, i.e. so blind people could get the chart data even though they can't see the chart. Ironically though it has a few accessibility problems of its own. The two obvious problems here are:

• A chart’s dialog isn’t actually created until you hover the tooltip (or something like that), so initially the references to "modal-title" and "modal-description" are meaningless, causing accessibility warnings and also confusion for people that use screen readers.

The error is reported by accessibility-checker (although it would be a problem even if accessibility-checker failed to report it). Strangely accessibility-checker only reports it when run from Node, not inside Chrome. Not sure why.

    - Message: The 'id' "modal-title, modal-description" specified for the ARIA property 'aria-labelledby, aria-describedby' value is not valid
      Level: violation
      XPath: /html[2]/body[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/table[1]/tbody[1]/tr[15]/td[4]/div[1]/div[3]
      Snippet: <div tabindex="-1" aria-describedby="modal-description" aria-labelledby="modal-title" aria-modal="true" role="dialog" data-modal="true" class="bx--modal cds--modal">
      Help: https://able.ibm.com/rules/archives/latest/doc/en-US/Rpt_Aria_ValidIdRef.html#%7B%22message%22%3A%22The%20'id'%20%5C%22modal-title%2C%20modal-description%5C%22%20specified%20for%20the%20ARIA%20property%20'aria-labelledby%2C%20aria-describedby'%20value%20is%20not%20valid%22%2C%22snippet%22%3A%22%3Cdiv%20tabindex%3D%5C%22-1%5C%22%20aria-describedby%3D%5C%22modal-description%5C%22%20aria-labelledby%3D%5C%22modal-title%5C%22%20aria-modal%3D%5C%22true%5C%22%20role%3D%5C%22dialog%5C%22%20data-modal%3D%5C%22true%5C%22%20class%3D%5C%22bx--modal%20cds--modal%5C%22%3E%22%2C%22value%22%3A%5B%22VIOLATION%22%2C%22FAIL%22%5D%2C%22reasonId%22%3A%22Fail_1%22%2C%22ruleId%22%3A%22Rpt_Aria_ValidIdRef%22%7D

• The aria-labelledby and aria-describedby are hardcoded (to "modal-title" and "modal-description"), so it’s only possible to support one chart per HTML page. Even though you can only open one modal at a time, there's still a problem: If the page has multiple charts and the user opens the modal for one, and then (after closing the first modal) opens the modal for another one.

There's also a performance aspect, why is it creating this markup ahead of time rather than on-the-fly. And why is it creating it even if I've disabled the button to show the dialog?

What WCAG 2.1 checkpoint does the issue violate?

see above

Version

1.6.14

Data & options used

No response

Relevant log output

No response

Codesandbox example

No response

What priority level would this issue be in your opinion?

P0

[theiliad]

we should change the aria-labelledby to ${CHART_ID}__modal-title, and also give the modal title that same ID