I have created a table component using React. We have an ios app in which that table is loaded. The table looks like below
Task
AssignedTo
DueDate
task name
Dev
6th April
Now when I open the app in iphone and enable voiceover then it is read like this
Heading, Text Field, 0, Column Header, Column 1
Notice, in the pronunciation instead of pronouncing column header name, it is announced as zero. Expected behavior is it is pronounced like this:
Heading, Text Field, Task, Column Header, Column 1
I want to understand, how voiceover extract text from table and why it is reading 0 instead of column header name.
I am new to stackoverflow, so sorry for the structural errors.
Update:
Here is a snippet of code.
<th role="columnheader" data-columnid="initialColumn-1" aria-sort="none">
<div>
<div>
<div hosting-element="hosting-element">
<div>
<div contenteditable="false">
<div contenteditable="false" aria-readonly="true" spellcheck="false" autocapitalize="sentences" autocorrect="off" autocomplete="off" tabindex="0" data-gramm_editor="false" role="textbox">
<div data-dbg-pageindex="0">
<div>
<div>
<span>Task
</span>
</div>
</div>
<div contenteditable="false" aria-hidden="true">
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<div tabindex="-1" aria-hidden="true">
</div>
</div>
</th>
You mention React and also tagged your question with html-table so I'm guessing this is an HTML application, not a native iOS app?
What does your table code look like? I'm a little puzzled why "heading" and "text field" are announced.
If you have an <h2> or any other level of heading in your table, you should hear the heading level. Voiceover will say "heading level X" after the heading text but in your example, you said you only heard "heading" without a level number.
And your table doesn't appear to have any <input> fields in it so why is "text field" announced?
I suppose if you have an <input> field whose label is "heading", then you'd hear "heading, text field".
<label for="foo">heading</label>
<input id="foo">
But, again, you didn't post any code so it's hard to say.
If your table is using proper structure, then if I tap on "Dev", I should hear "AssignedTo, Dev, row 2, column 2".
That is, I'll hear the column header text first, then the cell value, then the coordinates in the table (the row and the column number).
<table>
<tr>
<th scope="col">Task</th>
<th scope="col">AssignedTo</th>
<th scope="col">DueDate</th>
</tr>
<tr>
<td>task name</td>
<td>Dev</td>
<td>6th April</td>
</tr>
</table>
If I tap directly on a column header, for example "AssignedTo", I'll hear the column header text, the fact that it's a column header, and then the coordinates in the table. "AssignedTo, Column header, Row 1, Column 2".
If you tap on the first column header, in addition to what's announced above, you'll also hear "table start" and how many total rows and columns are in the table because you tapped in the first cell of the table.
Update based on new code snippet
Here's a short 20 second video of the new code running on iOS.
https://drive.google.com/file/d/1Gk_dm-P8DSUX5X3OCIl-bz-c_1GhGrYV/view?usp=sharing
The speech is a little fast (forgot to slow it down before recording) but you can see the caption panel at the bottom and follow along.
I was using w3chools.com as the testing page because it has an editor where I can paste code (kind of like using codepen). I put a few buttons before and after the table to give me something to focus on before I get to the table.
The full text of what's announced when I swipe right from the button to the first table column header is:
"Task, Row header, Column header, Row 1, Column 1, Text field, Read-only, Table start, 2 rows 3 columns, Double tap to edit, Use the rotor to access Misspelled Words"
There is not a "zero" in what's being announced.
As mentioned before, all you posted is just the text for the one column header and it's reading fine. You must have something else in your code causing the problem. Perhaps post a video showing the problem.
Try setting the header accessibilityLabel
header.accessibilityLabel = "Task"
Hope it helps!
Using DataTables, I am witnessing a reproduceable issue where the value of the data-filter html attribute is overriding the searchability of the data-search html attribute.
<td data-search="Jared Next" data-order="Jared Next" data-filter="Full-Time DM">
<div class="mb-2">
Jared Next
</div>
<div class="mb-2 text-muted small" title="Number of total deals posted by DM">
Posted: 294
</div>
</td>
When searching by "jared" the row does not appear.
When searching by "full-time dm" the row does appear.
Worth mentioning that the filter works as expected:
I apologize if I've not provided enough code to re-create the issue or if DataTables experts want the whole table.
I can easily provide it all.
The data-search and data-filter attributes are synonyms, in DataTables.
See here for details.
You should use one or the other, but not both at the same time.
Also, from the same doc link as above, in case it is relevant: Make sure the attributes are used consistently for every cell in a column:
In order for the HTML 5 data-* attribute detection and processing to work correctly, all cells in a column must have the same attribute available.
This is the html where table structure is made with the help of helper components. As in BookingRow selector rowData is used as attribute and in
Booking I am getting the listing of booking. So it is showing 10 records.
I want to display only 5 record so how to do this in angular 2.
<div>
<div>
<h3>Today's Bookings</h3>
<div>
<table width="100%">
<thead BookingHeadings type="provider"></thead>
<tbody BookingRow pageType="provider dashboard" [rowData]="Bookings" pricingColumnStatus=false></tbody>
</table>
<div><a [routerLink]="['/provider/bookings/todays']">
<button type="button" value="View all">View All</button></a>
</div>
</div>
I guess your [rowData]=“Bookings“ is an Array. And I also guessing you get the Bookings from some kind of http service. So you can in the Success callback slice the Array.
var onlyFiveBookings=Bookings.slice(0,5); // for the first five.
I think a better way is to change it server side so that the response would only contain 5 bookings.
So im currently trying to write a test/learn how to use Selenium. One of the issues I am running in to is that I need to select specfically the number 262 in this nested div.
The issue I ran into is that if I make the xpath //div[#class='np_amount inline'] that I get multiple results going down the entire page, and if I make it //div[#class='np_field_amount_etc'], then I get all three items in the row, and not just the number 262.
However, the initial div class (np_field_amount_etc) is unique. What xpath command would I write in order to only select the 262 in this series of div's?
<div class="np_field_amount_etc">
<div class="np_label inline">Total Calories</div>
<div class="np_amount inline">262 </div>
<div class="np_dv inline">14</div>
</div>
I think, somethings like this:
//div[#class='np_field_amount_etc']/div[#class='np_amount inline']
is what you want.
I tried to scrape the data which is neccesary, but when I am trying to exclude the part which is not needed, I was unable to do that. Please help in scraping the data which is necessary?
Case - 1:
<div class="abc xyz">
<div class="aaaaaa bbbbbb">
"I dont want to include this"
</div>
***"I just want to scrape this"***
</div>
Case - 2:
<div class="abc xyz">
<div class="aaaaaa bbbbbb">
</div>
***"I just want to scrape this"***
</div>
Both the cases, the output which I tried to get is "I just want to scrape this".
Already tried scraping using './/div[contains(#class,"abc")]//text()' - but in the first case it is giving output as "I dont want to include thisI just want to scrape this", In second case the expected output is scraped.
This one will have some garbage in result, but it will do the job:
result = response.xpath('//div[#class="abc xyz"]/text()').extract()
result = "".join(result)