Hello,
I have spent some two days trying to create a working accessible
dialog using React JS for the
riot.im web based matrix client.
I would like this dialog to:
- Have title, description, one or more buttons.
- move focus to the primary button when it shows
- be fully reported when used with a screen reader.
To be fully reported when used with a screen reader means that
its title and its description should be announced via text to
speech and / or presented in braille as appropriate.
The dialog is created as a div element within a DOM subtree. The
container element has aria-labelledby and aria-describedby
pointing to other nodes where there is the dialog label and a
description inside. These nodes are another divs with some text
inside.
When the dialog is created focus is automatically placed to the
appropriate button by calling the focus() method on a
corresponding DOM node.
This is created using React so visibility is not manipulated nor
aria-hidden is used. It is loaded asynchronously using webpack
and then rendered into the DOM the way Reac does its magic.
Results: the dialog title (content that is associated with a
dialog element via aria-labelledby) is read correctly. However
the description is not.
Originally I have assumed this might be a problem on my part as
I have found out if I try to render multiple such dialogs one
after the other the second instance is read correctly with orca.
Additionally I have found out one accessible test case here:
http://www.oaa-accessibility.org/example/2/
So I have tried to get an inspiration from that, rewrote my
react component in a way that it creates a hidden dialog, it
then shows it and finally moves the focus but still this is not
working like it should. Only the dialog title is reported for me
when focusing into such dialog.
Finally I have discovered all dialog windows are not reported
with Firefox 57 and Orca or Firefox 59 and Orca.
Even simple alert("blablabla"); that is under a browser control
is not reported correctly by orca.
Can you please test out possible aria dialogs on the web or
inside some real apps and help me to find a clue?
I am afraid something is wrong with Firefox vs at-spi vs orca
interaction, but I am unable to find that out.
Greetings
Peter
