Dear Support,
I have a few general questions about using the Dx Data Grid with a screen reader. I use the NVDA screen reader.
In which screen reader mode should I use the DX Data Grid?
I can generally use the grid reasonably well in focus mode.
However, I observe strange output and behavior when I try to use the grid in document mode.
Example 1:
I have interactive cells in a DataGrid with filter headers, which contain buttons and links, for example. If I now navigate to these elements using the arrow keys, I can navigate to the cell twice and get different outputs.
The first provides information about the header filter before the content of the cell is displayed. Here it is also possible to trigger the actions of the elements, e.g. by pressing Enter.
If you navigate with the arrow key down by 1, you are still in the same cell but nothing is displayed and you cannot interact.
Here the behavior is different depending on whether you operate the table completely in document mode or a mixture of document and focus mode (e.g. first in focus mode in the cells and then switch to document mode).
Example 2:
If you switch from focus to document mode within the grid and then press Tab again, the focus always jumps to different places. It is not clear to me what the rule is here. It seems that switching between the two modes generally means that the grid is no longer easy to use.
Hence my general question: How should the DxDataGrids be used with a screen reader? Should the focus mode always be used exclusively? How can the problems in document mode be solved?
Please use the [demo for filtering](Filtering - Angular Data Grid | Angular Example) and adjust the HTML as follows:
HTML<dx-data-grid
id="gridContainer"
[dataSource]="orders"
keyExpr="ID"
[showBorders]="true"
>
<dxo-filter-row
[visible]="showFilterRow"
[applyFilter]="currentFilter"
></dxo-filter-row>
<dxo-header-filter [visible]="showHeaderFilter"></dxo-header-filter>
<dxo-search-panel
[visible]="true"
[width]="240"
placeholder="Search..."
></dxo-search-panel>
<dxo-pager [visible]="true"></dxo-pager>
<dxi-column dataField="OrderNumber" [width]="140" caption="Invoice Number">
<dxo-header-filter [groupInterval]="10000"></dxo-header-filter>
</dxi-column>
<dxi-column
dataField="OrderDate"
alignment="right"
dataType="date"
[width]="120"
[calculateFilterExpression]="calculateFilterExpression"
>
<dxo-header-filter [dataSource]="orderHeaderFilter"></dxo-header-filter>
</dxi-column>
<dxi-column
dataField="DeliveryDate"
alignment="right"
dataType="datetime"
format="M/d/yyyy, HH:mm"
[width]="180"
></dxi-column>
<dxi-column
dataField="SaleAmount"
alignment="right"
format="currency"
[editorOptions]="{
format: 'currency',
showClearButton: true,
inputAttr: {
'aria-label': 'Filter cell'
}
}"
>
<dxo-header-filter
[dataSource]="saleAmountHeaderFilter"
></dxo-header-filter>
</dxi-column>
<dxi-column dataField="Employee" cellTemplate="cellTemplate"></dxi-column>
<dxi-column dataField="CustomerStoreCity" caption="City">
<dxo-header-filter>
<dxo-search [enabled]="true"></dxo-search>
</dxo-header-filter>
</dxi-column>
<div
*dxTemplate="let d of 'cellTemplate'"
>
<a href="google.de">Employee</a>
</div>
</dx-data-grid>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Apply Filter</span>
<dx-select-box
id="useFilterApplyButton"
[inputAttr]="{ 'aria-label': 'Filter' }"
[items]="applyFilterTypes"
[(value)]="currentFilter"
valueExpr="key"
displayExpr="name"
[disabled]="!showFilterRow"
></dx-select-box>
</div>
<div class="option">
<dx-check-box
text="Filter Row"
[(value)]="showFilterRow"
(onValueChanged)="clearFilter()"
></dx-check-box>
</div>
<div class="option">
<dx-check-box
text="Header Filter"
[(value)]="showHeaderFilter"
(onValueChanged)="clearFilter()"
></dx-check-box>
</div>
</div>
Regards,
Felix
Hi Felix,
I am working on this ticket and trying to replicate the issues you described. I will update this ticket once I have any news.
Thanks,
Alisher