[Sourcing-2][Accessibility: ACC-264.1][WIP] Table: Each of the cell value should be associated to its 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 each of the cell values in the table , it is observed that only the first column cell value is not associated to its header and only the cell value is mentioned. Each of the cell value should be associated to its header.

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 each of the cell values in the table , it will observe that only the first column cell value is not associated to its header and only the cell value is 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,

I checked the html and the headers attribute is set also for the cells on the second row: By principle when you enter in a column the header is announced once and if you navigate further in this column it is not repeated. But if you switch to another one, then it will be announced. And this works regardless of the row.

Could you please double check? If you still think something is missing, please give details on how to reach it.

Thanks, Nikolay

[JyotiKumari1507]

@droshev @nikolay-kolarov When the user access each of the cell values in the table , it is observed that for screen reader the first column cell value is not associated to its header and only the cell value is mentioned. Screen shot of screen reader readot is attached

[nikolay-kolarov]

Hi @JyotiKumari1507,

It is strange when you give another example now. My tests on the page showed that the headers are announced. 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 where they are not read?

Thanks, Nikolay

[nikolay-kolarov]

Also one more thing - the header is announced once you enter the column. If you then press arrow down it will not be announced (as you are in the same column). On the screenshot I see the extract of the announcement for the second row. So maybe if you entered on the first row, the header was announced and then on arrow down it wasn`t. But as described this is coming from the screen reader as optimization.

[JyotiKumari1507]

@nikolay-kolarov @droshev As per accessibility team first column of first row is also not associated with its hearder, rest column of first row was associated with header. you can refer this screen shot. If required i can ask recording from accessibility team

[nikolay-kolarov]

Hi @droshev,

This looks more like a list, but I do not see such multicolumn like example in the storybook, so that I can test it. Could you please clarify what is the used control with Jyoti and give me an example where I can test?

Thanks, Nikolay

[droshev]

@JyotiKumari1507 Which component did you use in this scenario?

[JyotiKumari1507]

@droshev @nikolay-kolarov used component : https://sap.github.io/fundamental-ngx/#/platform/table/basic

Html code used: <fdp-table #table id="kekTable" [dataSource]="source" [noVerticalBorders]="true" [noBorderX]="true" [noBorderY]="true" emptyTableMessage="No Key Encryption Keys found." [initialSortBy]="[{ field: 'version', direction: sortDirectionEnum.DESC }]" [rowsActivable]="true" (rowActivate)="onRowActivate($event)" [bodyHeight]="util.getBodyHeight(source.dataProvider.totalItems, 10)" fd-scrollbar noHorizontalScroll [rowNavigatable]="true" [highlightNavigatedRow]="true"

<fdp-table-toolbar title="Key Encryption Keys" [hideSearchInput]="true" [shouldOverflow]="true"

<fdp-table-toolbar-actions>
  <button
    id="rotateBt"
    fd-button
    fdType="emphasized"
    label="{{ rotateLabel }}"
    (click)="rotateKEK()"
  ></button>
  <button
    fd-button
    id="disableBt"
    fdType="transparent"
    [disabled]="isDisableBtnDisabled"
    label="{{ disableLabel }}"
    (click)="disable()"
  ></button>
  <button
    fd-button
    id="enableBt"
    fdType="transparent"
    [disabled]="isEnableBtnDisabled"
    label="{{ enableLabel }}"
    (click)="enable()"
  ></button>
  <button
    fd-button
    id="deleteBt"
    fdType="transparent"
    [disabled]="isDeleteBtnDisabled"
    label="{{ deleteLabel }}"
    (click)="delete()"
  ></button>
  <button
    fd-button
    id="historyBt"
    fdType="transparent"
    [disabled]="isViewBtnDisabled"
    label="{{ viewHistoryLabel }}"
    (click)="viewHistory()"
  ></button>
</fdp-table-toolbar-actions>

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

{{ item.createdAt }}

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

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

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

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

<fdp-table-header *fdpHeaderCellDef>Status</fdp-table-header>
<fdp-table-cell *fdpCellDef="let item; as: source">
  <fd-icon
    class="active-status"
    glyph="status-positive"
    *ngIf="item.state === 'Active'"
  >
  </fd-icon>
  <span class="active-status" *ngIf="item.state === ACTIVE">
    &nbsp;{{ item.state }}</span
  >
  <span *ngIf="item.state === 'Deleting'" class="inactive-status">
    {{ item.state }}&nbsp;</span
  >
  <span
    *ngIf="item.state === 'Disabled' || item.state === DELETED"
    class="disable-status"
  >
    {{ item.state }}&nbsp;</span
  >
  <span *ngIf="item.state === ENABLED"> {{ item.state }}</span>
  <button
    fd-button
    fdCompact
    id="cancelDelBtn"
    fdType="negative"
    ariaLabel="Negative"
    glyph="status-negative"
    class="inactive-status"
    *ngIf="item.state === 'Deleting'"
    (click)="cancelDelete(item.version)"
    title="{{ cancelDeleteLabel }}"
  ></button>
</fdp-table-cell>

[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, write the steps and what the 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]

@nikolay-kolarov Do you think you can check the last example and validate whether the announced data is not enought? thank you in advance.

[nikolay-kolarov]

Hello @divyamalhotra488, Hi @droshev,

I do not find an issue. The column headers are announced when you enter the table - you will go either on the column header and then move below, or if you were already in the table and come back then the header is still announced. Also when you switch between the columns they are announced. Please check this recording:

https://github.com/user-attachments/assets/c6d41389-febe-4856-a81f-2432140207f0

Also the headers are properly related:

So from my perspective it works as expected and has the needed connection. Please provide a recording or explain in which pattern, interaction steps, you expect the announcement.

Thanks, Nikolay