Custom switch

[GoogleCodeExporter]

Given this code, this system speaks: "On dot Off dot" and the debug console 
shows "<speak>On.Off.</speak>"

<div class="label" id="switch1label"
data-ez-focusable="false">Front Light:</div>

<div class="switch" onclick="flipSwitch();"
aria-labelledby="switch1label"
data-ez-sayrole="switch" 
data-ez-sayvalue="is on">
  <span class="selected">On</span>
  <span>Off</span>
</div>

I would like this code to make a custom switch-like element and would be read 
as "Front Light: switch, is on." when navigated to.

I wasn't able to fully trace the code to figure out why it said what it did. If 
you can come up with a better way to write the HTML, that would also be 
appreciated.

Original issue reported on code.google.com by jbjor...@gmail.com on 30 Sep 2013 at 3:41

[GoogleCodeExporter]

This issue was closed by revision r359.

Original comment by aeharding on 29 Oct 2013 at 5:55

• Changed state: Fixed

[GoogleCodeExporter]

Hi Bern,

Found the source of the problem. Stemmed from two things; one your problem, one 
mine:

1) You need data-ez-chunking="block" on the spans to prevent them from being 
grouped.
2) The onclick not working is my fault. I just fixed the problem. Stemmed from 
obj.onclick not getting the onclick on certain elements that are inline and 
aren't supposed to be clicked (annoying!). Changed to 
obj.hasAttribute('onclick') and is working a treat.

See below

<div class="label" id="switch1label"
data-ez-focusable="false">Front Light:</div>

<div class="switch" id="all" onclick="flipSwitch();"
aria-labelledby="switch1label"
data-ez-sayrole="switch" 
data-ez-sayvalue="is on">
  <span data-ez-chunking="block" class="selected">On</span>
  <span data-ez-chunking="block">Off</span>
</div>

Original comment by aeharding on 29 Oct 2013 at 5:59

[GoogleCodeExporter]

Thanks for making the fix; however, I wanted to do something a little different 
with my code sample--I wanted to make a new interactive element called a 
"switch" that had its own value string.

My intent was to have EZ Access highlight the entire switch, which has the 
words "On" and "Off" displayed on it. The selected position would have 
particular styling applied. In the sample code, I intended EZ Access to 
highlight the entire div.switch.

My intent was to have EZ Access read that div.switch and say, "Front Light: 
(switch) is on." where:
"Front Light:" is spoken because of the aria-labelledby attribute.
"switch" is spoken because of the data-ez-sayrole attribute.
"is on" is spoken because of the data-ez-sayvalue attribute.
The spans inside div.switch would not be read because they are "replaced" by 
the pseudo-label (i.e., div#switch1label).

Is there a better way to structure the HTML? I thought that the code would get 
role and value substrings for all elements and blank ones would simply not be 
concatenated into the speech output string.

Original comment by jbjor...@gmail.com on 29 Oct 2013 at 6:50

[GoogleCodeExporter]

Original comment by jbjor...@gmail.com on 29 Oct 2013 at 6:50

• Changed state: Started

[GoogleCodeExporter]

Hmm, I see. I will have to check this out. I will start with the equivalent 
with radio buttons and see if I can convert to aria.

Original comment by aeharding on 29 Oct 2013 at 8:58

[GoogleCodeExporter]

Here might be a good place to start with ARIA radio buttons:
http://test.cita.illinois.edu/aria/radio/radio1.php

Original comment by jbjor...@gmail.com on 6 Nov 2013 at 8:16