JAWS repeating all button multiple time when added in any table header or cell - uiaccessibility

In below html code when i focus on any button. All 3 button are read instead of just focused one.
<table>
<tr>
<th >Column 1</th>
<th >Column2</th>
<th >
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</th>
</tr>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3
<div>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</div>
</td>
</tr>
</table>
Is this JAWS issue. or am i missing something in my code.

Related

How can display table Section in every page like thead

I am trying to display table title with <section> tag in every page like <thead> tag as per below HTML script, But it's not displaying section tag
on every page. Is there any solution for this?
<table class="zebra">
<caption>Table caption goes here</caption>
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>167.00</td>
</tr>
<tr>
<td>Row2</td>
<td>Row2</td>
<td>444.53</td>
</tr>
<tr>
...... untill second page
</tr>
</tbody>
</table>

Simple table with colspan giving errors with datatables

I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!

your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html

Angular datatables - missing sort arrows when columns defined with DTColumnBuilder

I'm using Angular-datatables and when I define the table using the angular renderer I can see nice arrows for sorting column.
<table class="dataTable row-border hover" datatable="ng" dt options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">My header</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ex in ::vm.exes">
<td>{{ex.myValue}}</td>
</tr>
</tbody>
</table>
When I define the columns with DTColumnBuilder.newColumn the arrows are missing (sorting works).
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
class="dataTable row-border hover"
dt-disable-deep-watchers="true"
dt-instance="vm.dtInstanceCallback">
</table>
and
vm.dtColumns = [
DTColumnBuilder.newColumn('myValue').withTitle('My header'),
Can I bring the sorting arrows back?

<td style='text-align: right'> incorrectly aligned in IE11

I am trying to right align the values, but those are not aligning properly to the end of the column.
Example code:
<table id="demoTable1" cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<th style="text-align:right; width:23%"><bean:message key="label.amount"/></th>
</tr>
</thead>
<tbody >
<c:forEach items="${demoForm.amount}" var="amt" >
<tr>
<td dntitle="myAmt" style="text-align:right; width:23%">
<util:myCurrency name="amt" property="amtList" currProperty="curCode"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
And the Output looks like this:
How can I fix this?

Why does a table in a collapsible Bootstrap panel change width?

I have put together a Bootply demonstration here: http://www.bootply.com/Ss2aAnzqlZ.
It's a panel with a table as per http://getbootstrap.com/components/#panels-tables. However, I've also made the panel collapsible. The collapsing bit works OK, but the table itself doesn't retain shape. As you'll see in the Bootply, it doesn't fill the width of the panel when you first load the page. When you click "Improvements" in the panel header to collapse the panel, the table takes up the full panel width during the animation, then disappears. When you click again to show the panel content, the table is the full width until the animation stops, at which point, it shrinks back to what looks like an "auto" width.
Oddly enough, inspecting the table element shows that the table itself is full width, but the thead, tbody and tfoot aren't.
I've sort of tracked it down to the presence of the "collapse" class in the table. If you start the Bootply without the "collapse" class, it's full width until you collapse the panel. When you expand it, it goes back to auto width. I don't know why ... do you?
Here's the snippet, but the collapsing doesn't appear to run here. The Bootply is better.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>

The collapse class toggles the display style on the table between none and block and this appears to be interfering with the standard table CSS.
You can resolve this by putting your table inside a div and setting that div to collapse rather than the table.
New Bootply: http://www.bootply.com/L8h2OdpMuD
HTML:
<div style="margin: 15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

Alternatively, you can add the css:
table.collapse.in {
display: table;
}
Arguably this could be a patch to component-animations.less.