Accessibility for table header

[senthilcse49]

Table header is missing the accessibility i believe. Things like getting focus on the header column and sorting are not able to achieve with keyboard alone.

[AllenFang]

@senthilcse49, sorry for lately reply, I'll consider to add this feature in future :) thanks your suggestion 👍

[suribabum]

@AllenFang , We are also facing accessibility issues, Table Sorting is not working with keyboard Enter key. Another Issue is we have three dynamic tables with same columns in one page , I'm trying to do tabIndex , it is taking order first table header column and second table header column and third table. we need one table order is completed then tabindex move to next table. Please help on the accessibility issues .

[allendol]

Is this problem resolved" "Table header is missing the accessibility i believe. Things like getting focus on the header column and sorting are not able to achieve with keyboard alone." I have the same problem.

[suribabum]

@allendol,

Thanks for the reply, Header column tabIndex fine with single table in container. But I have multiple tables in same container (like I used reusable component for three tables)
tabIndex order taking first table column header next second table column vertically.. Please let me know how to handle this. Thanks

[allendol]

@suribabum How did you fix Table header accessibility for a single table? Where do you use Header column tabIndex?

[suribabum]

@allendol @AllenFang @senthilcse49 Hi Allen, I have used react bootstrap table2 component, I'm able to access table header accessibility for single table . Tabbing is working fine like horizontal process: If I inspected the code: Table1

<th tabindex="1" class=sortable>ID</th>
<th tabindex="2" class=sortable>Name</th>
<th tabindex="3" class=sortable>Age</th>

Table 2

<th tabindex="1" class=sortable>ID</th>
<th tabindex="2" class=sortable>Name</th>
<th tabindex="3" class=sortable>Age</th>

sample code here: const columns = [{ dataField: 'id', text: 'ID', sort: true }, { dataField: 'name', text: 'Name', sort: true }, { dataField: 'age', text: 'Age', sort: true }];

<BootstrapTable keyField='id' data={ tableData1} columns={ columns } /> <BootstrapTable keyField='id' data={ tableData2} columns={ columns } />

Here i'm doing the tabbing it works like below scenario: first tab highlighted or focused header column "ID" , next move to second table header column "ID" , then move to first table "Name" column ..next second table "Name' column its working like vertically because first column tabindex ="1" and second table also tabindex ="1".

How can i fix this issue.. please help..

Thanks, SuriBabu

[suribabum]

@allendol @AllenFang

I'm trying to override the tabIndex to 0 for all header columns, I tried with "headerAttrs" but not working .

Please help me, how to override tabIndex for header columns .

Thanks,

[suribabum]

@AllenFang @AllenFang

I got the tabindex "0" in current version 3.2.0 ..Now it's working fine. But header column sorting are not able to achieve with keyboard alone.

Thanks,