151429 2015-11-18 19:48:34 -0800 AX: aria-owns attribute does not work as expected 2015-11-20 09:41:56 -0800 1 1 1 Unclassified WebKit Accessibility Safari 9 Mac OS X 10.11 RESOLVED DUPLICATE 151498 InRadar P2 Normal --- 1 jondallas jondallas jcraig webkit-bug-importer oldest_to_newest 1143151 0 jondallas 2015-11-18 19:48:34 -0800 Hello, my expectation for aria-owns is that a developer can use it to group controls that are not otherwise grouped in DOM. My understanding is it’s a way to achieve and extend similar functionality as native radio controls using the name attribute. The developer can put radio buttons anywhere on the page but if the name property matches they are grouped together and announced as such in assistive technology. Spec for of aria-owns (which is brief and a little vague): http://www.w3.org/TR/wai-aria-1.1/#aria-owns Here is a test case: <div role="group" id="group"> <h1>Single state inputs with descriptions</h1> <div role="textbox" aria-selected="false" aria-owns="group">Alpha</div> <div>Description</div> <div role="textbox" aria-selected="true" aria-owns="group">Beta</div> <div>Description</div> <div role="textbox" aria-selected="false" aria-owns="group">Gamma</div> <div>Description</div> </div> I would expect the elements with role="textbook" to announce that they are part of a group of three textbooks and state whether or not this textbook is the selected one. Currently VoiceOver does not do this, likely because this information is not added to the accessibility tree. Attaching code for the example above. 1143154 1 webkit-bug-importer 2015-11-18 19:49:01 -0800 <rdar://problem/23606298> 1143155 2 265839 jondallas 2015-11-18 19:49:36 -0800 Created attachment 265839 This is the simple test case shown above. Adding the code for the test case in my message above. 1143157 3 265840 jondallas 2015-11-18 19:53:39 -0800 Created attachment 265840 Single state input group Attaching and a more complex example usecase for aria-owns. Each item should be announced similarly to a radio group (e.g. number of items in the group, and whether or not the current item is selected). 1143456 4 jcraig 2015-11-19 14:53:01 -0800 The aria-owns relationship is backwards in your example. I expect you meant to do this: <div role="radiogroup" aria-owns="r1 r2 r3"> <div role="radio" id="r1">Alpha</div> <div role="radio" id="r1">Beta</div> </div> <!-- this one, too. --> <div role="radio" id="r3">Gamma</div> I would recommend re-filing with the corrected test case, and duping this one out to the new bug. 1143457 5 jcraig 2015-11-19 14:53:50 -0800 (In reply to comment #4) > <div role="radio" id="r1">Beta</div> Typo: r1 should be r2, here. <div role="radio" id="r2">Beta</div> 1143671 6 jondallas 2015-11-20 09:41:56 -0800 Multiple issues with this bug. Refiled as https://bugs.webkit.org/show_bug.cgi?id=151498 Thanks! *** This bug has been marked as a duplicate of bug 151498 *** 265839 2015-11-18 19:49:36 -0800 2015-11-18 19:49:36 -0800 This is the simple test case shown above. aria-owns_test_simple.html text/html 559 jondallas PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAg PHRpdGxlPmFyaWEtb3ducyB0ZXN0PC90aXRsZT4KPC9oZWFkPgo8Ym9keT4KICAgIDxkaXYgcm9s ZT0iZ3JvdXAiIGlkPSJncm91cCI+CiAgICAgICAgPGgxPlNpbmdsZSBzdGF0ZSBpbnB1dHMgd2l0 aCBkZXNjcmlwdGlvbnM8L2gxPgogICAgICAgIDxkaXYgcm9sZT0idGV4dGJveCIgYXJpYS1zZWxl Y3RlZD0iZmFsc2UiIGFyaWEtb3ducz0iZ3JvdXAiPkFscGhhPC9kaXY+CiAgICAgICAgPGRpdj7i gJREZXNjcmlwdGlvbjwvZGl2PgogICAgICAgIDxkaXYgcm9sZT0idGV4dGJveCIgYXJpYS1zZWxl Y3RlZD0idHJ1ZSIgYXJpYS1vd25zPSJncm91cCI+QmV0YTwvZGl2PgogICAgICAgIDxkaXY+4oCU RGVzY3JpcHRpb248L2Rpdj4KICAgICAgICA8ZGl2IHJvbGU9InRleHRib3giIGFyaWEtc2VsZWN0 ZWQ9ImZhbHNlIiBhcmlhLW93bnM9Imdyb3VwIj5HYW1tYTwvZGl2PgogICAgICAgIDxkaXY+4oCU RGVzY3JpcHRpb248L2Rpdj4KICAgIDwvZGl2PgoKPC9ib2R5Pgo8L2h0bWw+Cg== 265840 2015-11-18 19:53:39 -0800 2015-11-18 19:53:39 -0800 Single state input group aria-owns_single_value_input_group.html text/html 2332 jondallas PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAg PHRpdGxlPmFyaWEtb3ducyB0ZXN0PC90aXRsZT4KICA8c3R5bGU+CiAgICBib2R5IHsKICAgICAg ICBmb250LWZhbWlseTogLWFwcGxlLXN5c3RlbS1mb250OwogICAgICAgIGZvbnQtc2l6ZTogMnZ3 OwogICAgfQoKICAgIFtyb2xlPWdyb3VwXSA+IGRpdiB7CiAgICAgICAgbWFyZ2luLWJvdHRvbTog MjBweDsKICAgIH0KCiAgICAudGV4dGJveCB7CiAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2Nr OwogICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgICAgICAgbWluLXdpZHRoOiAxNC4x cmVtOwogICAgICAgIGJvcmRlci1ib3R0b206IHNvbGlkIDJweDsKICAgICAgICBvdXRsaW5lOiBu b25lOwogICAgfQogICAgCiAgICBbYXJpYS1zZWxlY3RlZD1mYWxzZV0gLnRleHRib3g6aG92ZXIg ewogICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgIH0KCiAgICBbYXJpYS1zZWxlY3RlZD1mYWxz ZV0gLnRleHRib3ggewogICAgICAgIG91dGxpbmU6IG5vbmU7CiAgICAgICAgYmFja2dyb3VuZDog bGluZWFyLWdyYWRpZW50KCNlZWUsICNkZGQpOwogICAgICAgIHBhZGRpbmc6IDAuNWVtOwogICAg ICAgIGJvcmRlcjogbm9uZTsKICAgICAgICBib3JkZXItcmFkaXVzOiAwLjJyZW07CiAgICAgICAg Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4ICNiYmIsIDAgMCAxcHggMDsKICAgIH0KCiAgICBb cm9sZT1ncm91cF0gfiAqIHsKICAgICAgICBjb2xvcjogZ3JleTsKICAgIH0KCiAgICAjdmVoaWNs ZS10eXBlIHsKICAgICAgICB0ZXh0LXRyYW5zZm9ybTogbG93ZXJjYXNlOwogICAgfQogIDwvc3R5 bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8aDE+U2luZ2xlIHZhbHVlIGlucHV0IGdyb3VwPC9oMT4K ICAgIDxkaXYgcm9sZT0iZ3JvdXAiIGlkPSJncm91cCI+CiAgICAgICAgPGRpdiBhcmlhLW93bnM9 Imdyb3VwIiBhcmlhLXNlbGVjdGVkPSJmYWxzZSI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InRl eHRib3giPlNldCB0aGlzIGluc3RlYWQ8L2Rpdj4gPGxhYmVsPkFpcnBsYW5lPC9sYWJlbD4KICAg ICAgICA8L2Rpdj4KICAgICAgICA8ZGl2IGFyaWEtb3ducz0iZ3JvdXAiIGFyaWEtc2VsZWN0ZWQ9 InRydWUiPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0Ym94IiBjb250ZW50ZWRpdGFibGU+ TXVzdGFuZzwvZGl2PiA8bGFiZWw+QXV0b21vYmlsZTwvbGFiZWw+CiAgICAgICAgPC9kaXY+CiAg ICAgICAgPGRpdiBhcmlhLW93bnM9Imdyb3VwIiBhcmlhLXNlbGVjdGVkPSJmYWxzZSI+CiAgICAg ICAgICAgIDxkaXYgY2xhc3M9InRleHRib3giPlNldCB0aGlzIGluc3RlYWQ8L2Rpdj4gPGxhYmVs PkJvYXQ8L2xhYmVsPgogICAgICAgIDwvZGl2PgogICAgPC9kaXY+CgogICAgPGg0PlZhbHVlPC9o ND4KICAgIDxzcGFuIGlkPSJtb2RlbCI+TXVzdGFuZzwvc3Bhbj4gPHNwYW4gaWQ9InZlaGljbGUt dHlwZSI+QXV0b21vYmlsZTwvc3Bhbj4KCiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jb2RlLmpx dWVyeS5jb20vanF1ZXJ5LTIuMS40LmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQ+CiAgICAgICQo Jy50ZXh0Ym94JykuY2xpY2soZnVuY3Rpb24oKXsKICAgICAgICAkKHRoaXMpLnBhcmVudHMoJyNn cm91cCcpLmZpbmQoJ1thcmlhLXNlbGVjdGVkPSJ0cnVlIl0nKQogICAgICAgICAgICAuYXR0cign YXJpYS1zZWxlY3RlZCcsIGZhbHNlKTsKICAgICAgICAkKHRoaXMpLnBhcmVudHMoJyNncm91cCcp LmZpbmQoJy50ZXh0Ym94JykKICAgICAgICAgICAgLnByb3AoJ2NvbnRlbnRlZGl0YWJsZScsIGZh bHNlKQogICAgICAgICAgICAudGV4dCgnU2V0IHRoaXMgaW5zdGVhZCcpOwogICAgICAgICQodGhp cykucGFyZW50KCkuYXR0cignYXJpYS1zZWxlY3RlZCcsIHRydWUpOwogICAgICAgICQodGhpcyku cHJvcCgnY29udGVudGVkaXRhYmxlJywgdHJ1ZSkudGV4dCgnJyk7CiAgICAgICAgJCgnI21vZGVs LCAjdmVoaWNsZS10eXBlJykudGV4dCgnJyk7CiAgICAgICAgJCh0aGlzKS5mb2N1cygpOwogICAg ICB9KTsKICAgICAgJCgnLnRleHRib3gnKS5rZXl1cChmdW5jdGlvbigpewogICAgICAgICBtb2Rl bFZhbHVlID0gJCh0aGlzKS50ZXh0KCk7CiAgICAgICAgICQoJyNtb2RlbCcpLnRleHQobW9kZWxW YWx1ZSk7CiAgICAgICAgIHZlaGljbGVUeXBlVmFsdWUgPSAkKHRoaXMpLnBhcmVudCgpLmZpbmQo J2xhYmVsJykudGV4dCgpOwogICAgICAgICAkKCcjdmVoaWNsZS10eXBlJykudGV4dCh2ZWhpY2xl VHlwZVZhbHVlKTsKICAgICAgfSk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg==