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
Hi Felix,
Thank you for your patience.
I created a project with the code you shared: https://codesandbox.io/p/sandbox/3fmr8n

I experimented with NVDA and tried to replicate the issues you described, but did not notice issues with how NVDA narrates UI elements when switching from focus to document modes. Here is an image showing the Browse configuration:
Would you be able to share a short video that shows the exact steps you took to replicate the issue? This will help me investigate it more effectively.
I look forward to your reply.