[Sourcing-2][Accessibility: ACC-264.1][WIP] Table: Row details not associated to header

[JyotiKumari1507]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Component having issue: https://sap.github.io/fundamental-ngx/#/platform/table/basic
When the user access a single row of the table , it is observed that the row values are not associated to its header and only the cell values are mentioned. The row values of the table should always be associated to header to get the complete information.

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

All latest version

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Using Screen reader can check by implementing similar case. Just use table and access a single row of the table , it will be observe that the row values are not associated to its header and only the cell values are mentioned by screen reader

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Yes we have got this bug from Accessibility expert only.

Did you check the documentation and the API?

Yes

Did you search for similar issues?

Is there anything else we should know?

[nikolay-kolarov]

Hi @JyotiKumari1507,

When I tried to read the table, I get announcement for the row count.
What exactly do you mean with row details? Could you please give more info?

Thanks,
Nikolay

[JyotiKumari1507]

@droshev Please refer attached screen shot of screen reader. Its reading table cell value after table name. it is observed that the row values are not associated to its header. As per accessibility team row values of the table should always be associated to header to get the complete information

[nikolay-kolarov]

Hi @JyotiKumari1507,

It is strange when you give another example now. Could you please use the initial sample (https://sap.github.io/fundamental-ngx/#/platform/table/basic) and give concrete steps how to navigate in the table and what you expect?

Thanks,
Nikolay

[JyotiKumari1507]

@nikolay-kolarov @droshev As per accessibility team, it is observed that the row values of tables are not associated to its header during screen reader readout. and this is issue. You can see in attached screenshot also table header isn't readout. its directly reading row value. If required i can ask recording from accessibility team

[nikolay-kolarov]

Hello @JyotiKumari1507,

It is hard to work over pictures or recordings.
We need info about the exactly used components (a live sample) and steps how to reproduce.

On the picture that you sent:

• I do not understand if this is a table or list.
• I do not understand how the user navigated to get this output.
• I do not understand if the "Name" cell is focusable and has been focused during the navigation.
• In the screen reader announcement I see more information that I see on the visible UI, so I cannot understand by the picture why this is the case.

If I test the link that you gave (https://sap.github.io/fundamental-ngx/#/platform/table/basic) I am able to read the column header and they are announced when navigated between columns.

Best Regards,
Nikolay

[JyotiKumari1507]

@nikolay-kolarov its component https://sap.github.io/fundamental-ngx/#/platform/table/basic) only.
You can see accessibility team screen reader report in the screenshot which i attached earlier. Screen reader able to read table each sell value , but not header.
html used code:

<fdp-table
#table
id="appTable"
[dataSource]="source"
[noVerticalBorders]="true"
[noBorderX]="true"
[noBorderY]="true"
[rowsActivable]="true"
[rowNavigatable]="true"
emptyTableMessage="No Applications found"
(rowActivate)="onRowActivate($event)"
emptyTableMessage="No Applications found."
[initialSortBy]="[
{ field: 'updateAtLabel', direction: sortDirectionEnum.DESC }
]"
bodyHeight="{{
source.dataProvider.totalItems >= 16 && isCustomerTab
? '740px'
: source.dataProvider.totalItems >= 10 && !isCustomerTab
? '484px'
: 'auto'
}}"
fd-scrollbar
noHorizontalScroll

<fdp-table-toolbar
title="Applications"
[shouldOverflow]="true"

<fdp-column
name="appName"
key="appName"
label="{{ nameLabel }}"
[sortable]="true"
[filterable]="true"

<fdp-table-cell *fdpCellDef="let item">
  <div class="blue-bold">
    {{ item.appName }}
  </div>

  <div>
    {{ item.appId }}
  </div>
</fdp-table-cell>

{{ item.createdAtLabel }}

<fdp-column
name="updateAt"
key="updateAtLabel"
label="{{ changedOnLabel }}"
[sortable]="true"
[groupable]="true"
[filterable]="true"
align="end"

<fdp-table-cell *fdpCellDef="let item; as: source">
  {{ item.updateAtLabel }}
</fdp-table-cell>

<fdp-table-view-settings-dialog [table]="table" [allowDisablingSorting]="false">
<fdp-table-view-settings-filter
column="appName"
[type]="filterTypeEnum.MULTI"
label="{{ nameLabel }}"
[values]="appNameFilteringValues"

<fdp-table-view-settings-filter
column="serviceName"
[type]="filterTypeEnum.MULTI"
label="{{ serviceLabel }}"
[values]="serviceNameFilteringValues"

<fdp-table-view-settings-filter
column="createdBy"
[type]="filterTypeEnum.SINGLE"
label="{{ addedByLabel }}"
[values]="createByFilteringValues"

<fdp-table-view-settings-filter
column="createdAt"
[type]="filterTypeEnum.SINGLE"
label="{{ addedOnLabel }}"
[values]="createAtFilteringValues"

[droshev]

Most of the fields are not filled.

[JyotiKumari1507]

@droshev can you pls let me know what input field expecting from us?

[droshev]

@JyotiKumari1507 Can you create a stackblitz example, document steps and document what your expectation is?

[droshev]

@JyotiKumari1507 Can you create a stackblitz example, steps to reproduce and what the expectation is? Otherwise we will close the ticket.

[divyamalhotra488]

Hi @droshev, you can try with the example here

[droshev]

@divyamalhotra488 can you also answer the other part of my previous post! thank you

[divyamalhotra488]

Hi @droshev, open the app with screen reader and try to read the table values.
It is observed that the row values are not associated to its header. As per accessibility team row values of the table should always be associated to header to get the complete information

Please refer

[droshev]

@divyamalhotra488 can you documents steps to reproduce and what the expectation is based on the stackblitz example you have provided?

[divyamalhotra488]

@droshev, open the stackblitz example and try to read the table rows using screen reader.
Expectation:
Table cell values should be announced as part of associated column header.

[droshev]

@divyamalhotra488 I followed the steps, opened stackblitz and use the keyboard navigation over the table and you can reach and read any cell:

@nikolay-kolarov Do you think something else is needed?

[nikolay-kolarov]

Hi @droshev,
Hi @divyamalhotra488,

I also checked it and in my understanding this is working fine and the column headers are announced correctly when you enter or change a column.

recording.mp4

So I see not issue.

Best Regards,
Nikolay

[MeghanaVernekar]

Hello Colleagues,

Retested the issue and issue still exists. Video evidence attached.

EMC-defect.video.Evidence-1.mp4

Regards,
Meghana.

[nikolay-kolarov]

Hello @MeghanaVernekar,

The video that you provide is for a different example and table?
Please provide a respective example, as the last provided stackblitz is different and as you can see on my video, the problem is not reproducible.

@droshev - FYI

Thanks,
Nikolay

[divyamalhotra488]

Created new issue: #12493