Hello,
After creating the dialog it's primary button receives the focus. I can use tab and shift+tab to navigate. Or I can use up and down arrow keys tor read it's content. I think the focus is correctly placed to the appropriate spot.
You are right I need to lock screen reader accessing other parts of the DOM out side the dialog via aria-hidden and I also need to add suitable keyboard related events to lock the focus navigation inside my dialog.
I know I'm just at the beginning with this dialog however I've been trying out to find a workaround at the web app side long enough.
Alternatively native browser dialogs e.g. the dialog asking you if you would like to leave the page is not reported correctly too, so I do really need hekp ensuring orca and Firefox are working as they should here.
Also I would appreciate tips to dialog window examples that are working great for you or someone else so I can get a better understanding where the problem might be.
Greetings
Peter
Possibly related: when you create the dialog, are you able to arrow around its contents, or is your cursor left at the original spot, even though it seems like you've focused the correct control?
I struggled with this a while ago. Found that, despite focusing on an input control in the dialog, I could still arrow around the document as if focus hadn't moved. I discovered that I had to set aria-hidden="true" on the entire body, or maybe a container div within the body, and aria-hidden="false" on the dialog itself. That was an incredibly counter-intuitive thing that took days to figure out, and once I discovered it, my dialog behaved normally. I'd get speech as if the focus had moved, but the arrow keys/carrot told a different story.
Anyhow, I don't know if that's your issue, but if it is then perhaps aria-hidden is the solution. ally.js is a nice library that helps with stuff like this, BTW.
On 12/01/2017 09:25 AM, Peter Vágner wrote:
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
_______________________________________________ orca-list mailing list orca-list gnome org https://mail.gnome.org/ mailman/listinfo/orca-list Orca wiki: https://wiki.gnome.org/Projects/Orca Orca documentation: https://help.gnome.org/users/orca/stable/ GNOME Universal Access guide: https://help.gnome.org/users/gnome-help/stable/a11y.html Log bugs and feature requests at http://bugzilla.gnome.org
_______________________________________________
orca-list mailing list
orca-list gnome org
https://mail.gnome.org/mailman/listinfo/orca-list
Orca wiki: https://wiki.gnome.org/Projects/Orca
Orca documentation: https://help.gnome.org/users/orca/stable/
GNOME Universal Access guide: https://help.gnome.org/users/gnome-help/stable/a11y.html
Log bugs and feature requests at http://bugzilla.gnome.org