search

himo8 / google-axs-chrome

Automatically exported from code.google.com/p/google-axs-chrome
0 stars 1 forks source link

Describedby is not read on tabbing into a field #158

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Visit http://codepen.io/aarongustafson/full/dmuoe/
2. Tab from field to field and listen to the labels. No descriptions will be 
read.
3. Use a mouse to click on either of the last two fields and the describedby 
reference will be read.

What is the expected output? What do you see instead?

The labels should be read first, then the field type should be stated and then 
the describedby reference should be read. The describedby reference *is not 
read* when focused using the keyboard. The describedby reference *is read* when 
focused using the mouse. It should be read in both situations.

What version of the product are you using? On what operating system?

ChromeVox 40.0.2178.0, Chrome 38.0.2125.104, OS X 10.9.5

Please provide any additional information below.

The attached video demonstrates the issue.

Original issue reported on code.google.com by aa...@easy-designs.net on 5 Nov 2014 at 3:42

Attachments:

GoogleCodeExporter commented 9 years ago 
I can confirm this issue. This can easily be reprodced. 

Following does work:
<body>
    <div>          
        <input id="SecurityCode" name="SecurityCode" type="text" value="">            
    </div>

    <button type="button" id="btnBookNow" aria-describedby="payobligation">
                Pay now
            </button>  
     <div id="payobligation">
        Order with obligation to pay.
    </div>          
</body>

And this does not:

<body>
    <div>          
        <input id="SecurityCode" name="SecurityCode" type="text" value="">            
    </div>
    <div class="confirm-payment">

    </div>
    <div class="BookButtonContainer">        
                    <button type="button" id="btnBookNow" aria-describedby="payobligation">
                Pay now
            </button>  
 <div id="payobligation">
        Order with obligation to pay.
    </div>          
    </div> 

</body>

Hope this help..

Original comment by malinda....@gmail.com on 27 Nov 2014 at 6:05