[orca-list] Firefox, orca and aria dialogs

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

[orca-list] Firefox, orca and aria dialogs

Peter Vágner-3
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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Nolan Darilek

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
[hidden email]
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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Peter Vágner-3

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


Dňa 1. 12. 2017 4:36 PM používateľ "Nolan Darilek" <[hidden email]> napísal:

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
[hidden email]
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
[hidden email]
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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Joanmarie Diggs
In reply to this post by Peter Vágner-3
Hi Peter.

I'll look into the alert issue as that surprises me. If you have a
concrete test case which works as expected with NVDA and not with Orca,
please provide it with a list of steps to reproduce the problem.

Thanks!
--joanie

On 12/01/2017 10: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
> [hidden email]
> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Joanmarie Diggs
In reply to this post by Peter Vágner-3
Hi again.

Regarding javascript alerts: Bogus object is in the hierarchy. Just
filed a bug for that: https://bugzilla.mozilla.org/show_bug.cgi?id=1422345.

I'll look at the example dialog you cited in a bit.
--joanie

On 12/01/2017 10: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
> [hidden email]
> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Nolan Darilek
In reply to this post by Joanmarie Diggs
Here's a good accessible modal/dialog that at first glance seems to work
just fine:


https://gdkraus.github.io/accessible-modal-dialog/



On 12/01/2017 10:00 AM, Joanmarie Diggs wrote:

> Hi Peter.
>
> I'll look into the alert issue as that surprises me. If you have a
> concrete test case which works as expected with NVDA and not with Orca,
> please provide it with a list of steps to reproduce the problem.
>
> Thanks!
> --joanie
>
> On 12/01/2017 10: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
>> [hidden email]
>> 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
> [hidden email]
> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Peter Vágner-3
In reply to this post by Joanmarie Diggs

Hello,

The guess number example I've posted in my initial message is the only one that's working for me.
I will send more examples this time showings dialogs which are not working well for me.

Greetings

Peter


Dňa 1. 12. 2017 5:34 PM používateľ "Joanmarie Diggs" <[hidden email]> napísal:
Hi again.

Regarding javascript alerts: Bogus object is in the hierarchy. Just
filed a bug for that: https://bugzilla.mozilla.org/show_bug.cgi?id=1422345.

I'll look at the example dialog you cited in a bit.
--joanie

On 12/01/2017 10: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
> [hidden email]
> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Joanmarie Diggs
In reply to this post by Nolan Darilek
Hi Nolan.

When you say works just fine, do you mean with Orca? Or that it works
just fine with NVDA but not with Orca? (I ask because you replied to my
email asking for dialogs which work with NVDA but not Orca.)

--joanie

On 12/01/2017 11:42 AM, Nolan Darilek wrote:

> Here's a good accessible modal/dialog that at first glance seems to work
> just fine:
>
>
> https://gdkraus.github.io/accessible-modal-dialog/
>
>
>
> On 12/01/2017 10:00 AM, Joanmarie Diggs wrote:
>> Hi Peter.
>>
>> I'll look into the alert issue as that surprises me. If you have a
>> concrete test case which works as expected with NVDA and not with Orca,
>> please provide it with a list of steps to reproduce the problem.
>>
>> Thanks!
>> --joanie
>>
>> On 12/01/2017 10: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
>>> [hidden email]
>>> 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
>> [hidden email]
>> 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
> [hidden email]
> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Peter Vágner-3
Hello,

Now I have realized I need to explain this in more details with steps to reproduce.

There are several possible implementations. People tend to workaround screen vs AT issues by placing focus on the container dialog element. This is a sort of thing I'm trying to avoid.

Please load this in firefox and follow along https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

- Locate Add delivery address and activate it either by pressing spacebar or an enter key.
- There is no description associated with this dialog (no aria-describedby on the container element with role=dialog) and focus is placed into the entry text labelled as streed. This dialog is working fine and does not exhibit the issue I'm having.
- Keep pressing the tab key repeatedly until you land on Verify address and press the space bar to activate
- The dialog pops up and the context is reported. However this also does not exhibit my issue as the author placed focus to the container dialog element. Yes they are explaining that they are placing focus to the dialog not to first focusable element because of scrolling issues so they have a valid use case but again it's different to mine.
- Close this second dialog by pressing the esc key. You will land on the verify address button again.
- Now press the tab key to move on to the Add button and activate it with the enter key or the space bar key.
- Now things start to be interesting as this dialog is very similar in nature to what I'm trying to do. The dialog has a label and a description associated via corresponding aria tags and the focus is moved to the OK button as the dialog shows up. When this dialog appears for the first time orca presents its label followed by the presentation of the OK button. When this dialog is inwoked for the second, third or even more times no label and no description is presented. OK button is presented only.

Now load this other page: http://davidtheclark.github.io/react-aria-modal/demo/
Examples 1, 2, 4, 6 are similar to what I am expecting and they are failing in the same way as I have just described.
Examples 3 and 5 are focusing the container dialog and they are not working the way I'm expecting here.

The example proposed by Nolan at https://gdkraus.github.io/accessible-modal-dialog/ is exhibiting the issue the way I have described. When activating the dialog for the first time it works correctly. When activating it multiple times second and other popups only report the button failing to report the dialog title and the dialog description.

Thanks and greetings

Peter


2017-12-01 18:02 GMT+01:00 Joanmarie Diggs <[hidden email]>:
Hi Nolan.

When you say works just fine, do you mean with Orca? Or that it works
just fine with NVDA but not with Orca? (I ask because you replied to my
email asking for dialogs which work with NVDA but not Orca.)

--joanie

On 12/01/2017 11:42 AM, Nolan Darilek wrote:
> Here's a good accessible modal/dialog that at first glance seems to work
> just fine:
>
>
> https://gdkraus.github.io/accessible-modal-dialog/
>
>
>
> On 12/01/2017 10:00 AM, Joanmarie Diggs wrote:
>> Hi Peter.
>>
>> I'll look into the alert issue as that surprises me. If you have a
>> concrete test case which works as expected with NVDA and not with Orca,
>> please provide it with a list of steps to reproduce the problem.
>>
>> Thanks!
>> --joanie
>>
>> On 12/01/2017 10: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
>>> [hidden email]
>>> 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
>> [hidden email]
>> 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
> [hidden email]
> 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
[hidden email]
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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Joanmarie Diggs
Hey Peter.

I just added a hackaround to Orca master for the issue in which Nolan's
example case isn't fully presented subsequent times the dialog appears.
I am hoping that it also solves your other problems. I'll try to look at
them this weekend -- unless I don't have to because they are solved.
<smile> Mind re-testing?

On a different note, something else wrong with Firefox's JavaScript
alerts: https://bugzilla.mozilla.org/show_bug.cgi?id=1422424

--joanie

On 12/01/2017 01:16 PM, Peter Vágner wrote:

> Hello,
>
> Now I have realized I need to explain this in more details with steps to
> reproduce.
>
> There are several possible implementations. People tend to workaround
> screen vs AT issues by placing focus on the container dialog element. This
> is a sort of thing I'm trying to avoid.
>
> Please load this in firefox and follow along
> https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
>
> - Locate Add delivery address and activate it either by pressing spacebar
> or an enter key.
> - There is no description associated with this dialog (no aria-describedby
> on the container element with role=dialog) and focus is placed into the
> entry text labelled as streed. This dialog is working fine and does not
> exhibit the issue I'm having.
> - Keep pressing the tab key repeatedly until you land on Verify address and
> press the space bar to activate
> - The dialog pops up and the context is reported. However this also does
> not exhibit my issue as the author placed focus to the container dialog
> element. Yes they are explaining that they are placing focus to the dialog
> not to first focusable element because of scrolling issues so they have a
> valid use case but again it's different to mine.
> - Close this second dialog by pressing the esc key. You will land on the
> verify address button again.
> - Now press the tab key to move on to the Add button and activate it with
> the enter key or the space bar key.
> - Now things start to be interesting as this dialog is very similar in
> nature to what I'm trying to do. The dialog has a label and a description
> associated via corresponding aria tags and the focus is moved to the OK
> button as the dialog shows up. When this dialog appears for the first time
> orca presents its label followed by the presentation of the OK button. When
> this dialog is inwoked for the second, third or even more times no label
> and no description is presented. OK button is presented only.
>
> Now load this other page:
> http://davidtheclark.github.io/react-aria-modal/demo/
> Examples 1, 2, 4, 6 are similar to what I am expecting and they are failing
> in the same way as I have just described.
> Examples 3 and 5 are focusing the container dialog and they are not working
> the way I'm expecting here.
>
> The example proposed by Nolan at
> https://gdkraus.github.io/accessible-modal-dialog/ is exhibiting the issue
> the way I have described. When activating the dialog for the first time it
> works correctly. When activating it multiple times second and other popups
> only report the button failing to report the dialog title and the dialog
> description.
>
> Thanks and greetings
>
> Peter
>
>
> 2017-12-01 18:02 GMT+01:00 Joanmarie Diggs <[hidden email]>:
>
>> Hi Nolan.
>>
>> When you say works just fine, do you mean with Orca? Or that it works
>> just fine with NVDA but not with Orca? (I ask because you replied to my
>> email asking for dialogs which work with NVDA but not Orca.)
>>
>> --joanie
>>
>> On 12/01/2017 11:42 AM, Nolan Darilek wrote:
>>> Here's a good accessible modal/dialog that at first glance seems to work
>>> just fine:
>>>
>>>
>>> https://gdkraus.github.io/accessible-modal-dialog/
>>>
>>>
>>>
>>> On 12/01/2017 10:00 AM, Joanmarie Diggs wrote:
>>>> Hi Peter.
>>>>
>>>> I'll look into the alert issue as that surprises me. If you have a
>>>> concrete test case which works as expected with NVDA and not with Orca,
>>>> please provide it with a list of steps to reproduce the problem.
>>>>
>>>> Thanks!
>>>> --joanie
>>>>
>>>> On 12/01/2017 10: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
>>>>> [hidden email]
>>>>> 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
>>>> [hidden email]
>>>> 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
>>> [hidden email]
>>> 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
>> [hidden email]
>> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Peter Vágner-3
Hello,

Excuse me for the delay it took me a bit longer to test this and try to again find something new within my little project.

The good news is that after you have added this hackaround to orca many more dialogs are now presented. e.g. the one Nolan has pointed to is working no mather how many times it shows up. The dialog I have described at the aria best practices site is also working great now. Even gnome native dialogs do correctly report the description now e.g. when trying to connect to a wifi network and there are no known networks in range.
So overall I think this is a great change.

That last example which is react-aria-modal turned out not to be fully accessible. It's missing aria-describedby on the dialog node so I should have checked better before mentioning it.



I still can't get the dialog I'm working on to become accessible.
Please can you take a look at it as I really can't find out what I might be missing.
With NVDA on windows this is working.
My dialog can be seen at
There is a row of 6 buttons in the complementary content on the bottom left I think. These are Home, Start chat, Room directory, Create room, Communities and Settings. I have added a dummy question dialog to all these 6 buttons so while testing you don't need to login, or type into the chat app in question. It's enough t press one of these buttons to see the dialog in action.


despite adding aria-hidden to the app node, trapping the keyboard within my dialog, correctly setting up aria-describedby and aria-labelledby I can't make it work with orca.

Thanks and greetings

Peter


2017-12-02 0:32 GMT+01:00 Joanmarie Diggs <[hidden email]>:
Hey Peter.

I just added a hackaround to Orca master for the issue in which Nolan's
example case isn't fully presented subsequent times the dialog appears.
I am hoping that it also solves your other problems. I'll try to look at
them this weekend -- unless I don't have to because they are solved.
<smile> Mind re-testing?

On a different note, something else wrong with Firefox's JavaScript
alerts: https://bugzilla.mozilla.org/show_bug.cgi?id=1422424

--joanie

On 12/01/2017 01:16 PM, Peter Vágner wrote:
> Hello,
>
> Now I have realized I need to explain this in more details with steps to
> reproduce.
>
> There are several possible implementations. People tend to workaround
> screen vs AT issues by placing focus on the container dialog element. This
> is a sort of thing I'm trying to avoid.
>
> Please load this in firefox and follow along
> https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
>
> - Locate Add delivery address and activate it either by pressing spacebar
> or an enter key.
> - There is no description associated with this dialog (no aria-describedby
> on the container element with role=dialog) and focus is placed into the
> entry text labelled as streed. This dialog is working fine and does not
> exhibit the issue I'm having.
> - Keep pressing the tab key repeatedly until you land on Verify address and
> press the space bar to activate
> - The dialog pops up and the context is reported. However this also does
> not exhibit my issue as the author placed focus to the container dialog
> element. Yes they are explaining that they are placing focus to the dialog
> not to first focusable element because of scrolling issues so they have a
> valid use case but again it's different to mine.
> - Close this second dialog by pressing the esc key. You will land on the
> verify address button again.
> - Now press the tab key to move on to the Add button and activate it with
> the enter key or the space bar key.
> - Now things start to be interesting as this dialog is very similar in
> nature to what I'm trying to do. The dialog has a label and a description
> associated via corresponding aria tags and the focus is moved to the OK
> button as the dialog shows up. When this dialog appears for the first time
> orca presents its label followed by the presentation of the OK button. When
> this dialog is inwoked for the second, third or even more times no label
> and no description is presented. OK button is presented only.
>
> Now load this other page:
> http://davidtheclark.github.io/react-aria-modal/demo/
> Examples 1, 2, 4, 6 are similar to what I am expecting and they are failing
> in the same way as I have just described.
> Examples 3 and 5 are focusing the container dialog and they are not working
> the way I'm expecting here.
>
> The example proposed by Nolan at
> https://gdkraus.github.io/accessible-modal-dialog/ is exhibiting the issue
> the way I have described. When activating the dialog for the first time it
> works correctly. When activating it multiple times second and other popups
> only report the button failing to report the dialog title and the dialog
> description.
>
> Thanks and greetings
>
> Peter
>
>
> 2017-12-01 18:02 GMT+01:00 Joanmarie Diggs <[hidden email]>:
>
>> Hi Nolan.
>>
>> When you say works just fine, do you mean with Orca? Or that it works
>> just fine with NVDA but not with Orca? (I ask because you replied to my
>> email asking for dialogs which work with NVDA but not Orca.)
>>
>> --joanie
>>
>> On 12/01/2017 11:42 AM, Nolan Darilek wrote:
>>> Here's a good accessible modal/dialog that at first glance seems to work
>>> just fine:
>>>
>>>
>>> https://gdkraus.github.io/accessible-modal-dialog/
>>>
>>>
>>>
>>> On 12/01/2017 10:00 AM, Joanmarie Diggs wrote:
>>>> Hi Peter.
>>>>
>>>> I'll look into the alert issue as that surprises me. If you have a
>>>> concrete test case which works as expected with NVDA and not with Orca,
>>>> please provide it with a list of steps to reproduce the problem.
>>>>
>>>> Thanks!
>>>> --joanie
>>>>
>>>> On 12/01/2017 10: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
>>>>> [hidden email]
>>>>> 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
>>>> [hidden email]
>>>> 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
>>> [hidden email]
>>> 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
>> [hidden email]
>> 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
[hidden email]
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
Reply | Threaded
Open this post in threaded view
|

Re: [orca-list] Firefox, orca and aria dialogs

Joanmarie Diggs
Hi Peter.

Your Riot dialogs are now being presented to me. Could you please pull
master and let me know?

Thanks!
--joanie

On 12/03/2017 05:20 PM, Peter Vágner wrote:

> Hello,
>
> Excuse me for the delay it took me a bit longer to test this and try to
> again find something new within my little project.
>
> The good news is that after you have added this hackaround to orca many
> more dialogs are now presented. e.g. the one Nolan has pointed to is
> working no mather how many times it shows up. The dialog I have
> described at the aria best practices site is also working great now.
> Even gnome native dialogs do correctly report the description now e.g.
> when trying to connect to a wifi network and there are no known networks
> in range.
> So overall I think this is a great change.
>
> That last example which is react-aria-modal turned out not to be fully
> accessible. It's missing aria-describedby on the dialog node so I should
> have checked better before mentioning it.
>
>
>
> I still can't get the dialog I'm working on to become accessible.
> Please can you take a look at it as I really can't find out what I might
> be missing.
> With NVDA on windows this is working.
> My dialog can be seen at
> https://chat.pvagner.tk
> There is a row of 6 buttons in the complementary content on the bottom
> left I think. These are Home, Start chat, Room directory, Create room,
> Communities and Settings. I have added a dummy question dialog to all
> these 6 buttons so while testing you don't need to login, or type into
> the chat app in question. It's enough t press one of these buttons to
> see the dialog in action.
>
>
> despite adding aria-hidden to the app node, trapping the keyboard within
> my dialog, correctly setting up aria-describedby and aria-labelledby I
> can't make it work with orca.
>
> Thanks and greetings
>
> Peter
>
>
> 2017-12-02 0:32 GMT+01:00 Joanmarie Diggs <[hidden email]
> <mailto:[hidden email]>>:
>
>     Hey Peter.
>
>     I just added a hackaround to Orca master for the issue in which Nolan's
>     example case isn't fully presented subsequent times the dialog appears.
>     I am hoping that it also solves your other problems. I'll try to look at
>     them this weekend -- unless I don't have to because they are solved.
>     <smile> Mind re-testing?
>
>     On a different note, something else wrong with Firefox's JavaScript
>     alerts: https://bugzilla.mozilla.org/show_bug.cgi?id=1422424
>     <https://bugzilla.mozilla.org/show_bug.cgi?id=1422424>
>
>     --joanie
>
>     On 12/01/2017 01:16 PM, Peter Vágner wrote:
>     > Hello,
>     >
>     > Now I have realized I need to explain this in more details with
>     steps to
>     > reproduce.
>     >
>     > There are several possible implementations. People tend to workaround
>     > screen vs AT issues by placing focus on the container dialog
>     element. This
>     > is a sort of thing I'm trying to avoid.
>     >
>     > Please load this in firefox and follow along
>     >
>     https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
>     <https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html>
>     >
>     > - Locate Add delivery address and activate it either by pressing
>     spacebar
>     > or an enter key.
>     > - There is no description associated with this dialog (no
>     aria-describedby
>     > on the container element with role=dialog) and focus is placed
>     into the
>     > entry text labelled as streed. This dialog is working fine and
>     does not
>     > exhibit the issue I'm having.
>     > - Keep pressing the tab key repeatedly until you land on Verify
>     address and
>     > press the space bar to activate
>     > - The dialog pops up and the context is reported. However this
>     also does
>     > not exhibit my issue as the author placed focus to the container
>     dialog
>     > element. Yes they are explaining that they are placing focus to
>     the dialog
>     > not to first focusable element because of scrolling issues so they
>     have a
>     > valid use case but again it's different to mine.
>     > - Close this second dialog by pressing the esc key. You will land
>     on the
>     > verify address button again.
>     > - Now press the tab key to move on to the Add button and activate
>     it with
>     > the enter key or the space bar key.
>     > - Now things start to be interesting as this dialog is very similar in
>     > nature to what I'm trying to do. The dialog has a label and a
>     description
>     > associated via corresponding aria tags and the focus is moved to
>     the OK
>     > button as the dialog shows up. When this dialog appears for the
>     first time
>     > orca presents its label followed by the presentation of the OK
>     button. When
>     > this dialog is inwoked for the second, third or even more times no
>     label
>     > and no description is presented. OK button is presented only.
>     >
>     > Now load this other page:
>     > http://davidtheclark.github.io/react-aria-modal/demo/
>     <http://davidtheclark.github.io/react-aria-modal/demo/>
>     > Examples 1, 2, 4, 6 are similar to what I am expecting and they
>     are failing
>     > in the same way as I have just described.
>     > Examples 3 and 5 are focusing the container dialog and they are
>     not working
>     > the way I'm expecting here.
>     >
>     > The example proposed by Nolan at
>     > https://gdkraus.github.io/accessible-modal-dialog/
>     <https://gdkraus.github.io/accessible-modal-dialog/> is exhibiting
>     the issue
>     > the way I have described. When activating the dialog for the first
>     time it
>     > works correctly. When activating it multiple times second and
>     other popups
>     > only report the button failing to report the dialog title and the
>     dialog
>     > description.
>     >
>     > Thanks and greetings
>     >
>     > Peter
>     >
>     >
>     > 2017-12-01 18:02 GMT+01:00 Joanmarie Diggs <[hidden email]
>     <mailto:[hidden email]>>:
>     >
>     >> Hi Nolan.
>     >>
>     >> When you say works just fine, do you mean with Orca? Or that it works
>     >> just fine with NVDA but not with Orca? (I ask because you replied
>     to my
>     >> email asking for dialogs which work with NVDA but not Orca.)
>     >>
>     >> --joanie
>     >>
>     >> On 12/01/2017 11:42 AM, Nolan Darilek wrote:
>     >>> Here's a good accessible modal/dialog that at first glance seems
>     to work
>     >>> just fine:
>     >>>
>     >>>
>     >>> https://gdkraus.github.io/accessible-modal-dialog/
>     <https://gdkraus.github.io/accessible-modal-dialog/>
>     >>>
>     >>>
>     >>>
>     >>> On 12/01/2017 10:00 AM, Joanmarie Diggs wrote:
>     >>>> Hi Peter.
>     >>>>
>     >>>> I'll look into the alert issue as that surprises me. If you have a
>     >>>> concrete test case which works as expected with NVDA and not
>     with Orca,
>     >>>> please provide it with a list of steps to reproduce the problem.
>     >>>>
>     >>>> Thanks!
>     >>>> --joanie
>     >>>>
>     >>>> On 12/01/2017 10: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 <http://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/
>     <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
>     >>>>> [hidden email] <mailto:[hidden email]>
>     >>>>> https://mail.gnome.org/mailman/listinfo/orca-list
>     <https://mail.gnome.org/mailman/listinfo/orca-list>
>     >>>>> Orca wiki: https://wiki.gnome.org/Projects/Orca
>     <https://wiki.gnome.org/Projects/Orca>
>     >>>>> Orca documentation: https://help.gnome.org/users/orca/stable/
>     <https://help.gnome.org/users/orca/stable/>
>     >>>>> GNOME Universal Access guide:
>     >>>>> https://help.gnome.org/users/gnome-help/stable/a11y.html
>     <https://help.gnome.org/users/gnome-help/stable/a11y.html>
>     >>>>> Log bugs and feature requests at http://bugzilla.gnome.org
>     >>>>>
>     >>>> _______________________________________________
>     >>>> orca-list mailing list
>     >>>> [hidden email] <mailto:[hidden email]>
>     >>>> https://mail.gnome.org/mailman/listinfo/orca-list
>     <https://mail.gnome.org/mailman/listinfo/orca-list>
>     >>>> Orca wiki: https://wiki.gnome.org/Projects/Orca
>     <https://wiki.gnome.org/Projects/Orca>
>     >>>> Orca documentation: https://help.gnome.org/users/orca/stable/
>     <https://help.gnome.org/users/orca/stable/>
>     >>>> GNOME Universal Access guide:
>     >>>> https://help.gnome.org/users/gnome-help/stable/a11y.html
>     <https://help.gnome.org/users/gnome-help/stable/a11y.html>
>     >>>> Log bugs and feature requests at http://bugzilla.gnome.org
>     >>>
>     >>> _______________________________________________
>     >>> orca-list mailing list
>     >>> [hidden email] <mailto:[hidden email]>
>     >>> https://mail.gnome.org/mailman/listinfo/orca-list
>     <https://mail.gnome.org/mailman/listinfo/orca-list>
>     >>> Orca wiki: https://wiki.gnome.org/Projects/Orca
>     <https://wiki.gnome.org/Projects/Orca>
>     >>> Orca documentation: https://help.gnome.org/users/orca/stable/
>     <https://help.gnome.org/users/orca/stable/>
>     >>> GNOME Universal Access guide:
>     >>> https://help.gnome.org/users/gnome-help/stable/a11y.html
>     <https://help.gnome.org/users/gnome-help/stable/a11y.html>
>     >>> Log bugs and feature requests at http://bugzilla.gnome.org
>     >>
>     >> _______________________________________________
>     >> orca-list mailing list
>     >> [hidden email] <mailto:[hidden email]>
>     >> https://mail.gnome.org/mailman/listinfo/orca-list
>     <https://mail.gnome.org/mailman/listinfo/orca-list>
>     >> Orca wiki: https://wiki.gnome.org/Projects/Orca
>     <https://wiki.gnome.org/Projects/Orca>
>     >> Orca documentation: https://help.gnome.org/users/orca/stable/
>     <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
> [hidden email]
> 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
[hidden email]
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