Ticket T1285416
Visible to All Users

DxDataGrid - different screen reader modes

created 4 days ago

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

Comments (1)
Alisher (DevExpress Support) 3 days ago

    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

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.