[Sourcing-2][Accessibility: ACC-264.1][WIP] The aria-expanded attribute is not allowed on Search of Table component

[JyotiKumari1507]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

The aria-expanded attribute is not allowed on Search of Table component. Search text box in toolbar panel of Table (https://sap.github.io/fundamental-ngx/#/platform/table/basic) the aria-expanded attribute is not allowed. Developers must use valid markup and follow the rules of the ARIA specification. Below Code Snippet found by Accessibility expert during testing: Code Snippet: <input aria-expanded="false" aria-controls="fdp-search-field-menu-8" aria-labelledby="fd-table-toolbar-title-4" id="fdp-search-field-input-6" placeholder="Search" class="fd-input fd-input-group__input fdp-search-field__input ng-untouched ng-pristine ng-valid" autocomplete="off" aria-haspopup="true" type="search">

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 Access assistant easily can check.

1. Login with the URL Provided.
2. Activate 'shared keys' app. • Download Access assistant tool from level access. • For registered AMP user, login with your SAP email ID into SAP AMP instance: sap.levelaccess.net

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 am not able to find the aria-expanded attribute on the search fields on the page https://sap.github.io/fundamental-ngx/#/platform/table/basic Also looking by ID the same element pointed in the issue does not have it? Could you please retest? If you are able to reproduce, please give the exact steps to reach this state.

Thanks, Nikolay

[JyotiKumari1507]

@nikolay-kolarov @droshev Attached screenshot shared by accessibility team

[nikolay-kolarov]

Hello @droshev,

The issue is not related with the table. I was able to see it in the SearchField page here: https://sap.github.io/fundamental-ngx/#/platform/search-field

Please remove the aria-expanded attribute, as it is not valid for an input. It does not exist also in the UI5 SearchField: https://ui5.sap.com/#/entity/sap.m.SearchField/sample/sap.m.sample.SearchField

Best Regards, Nikolay

[JyotiKumari1507]

@droshev issues exits in search field of Platform table. We are not adding search field separately and not adding aria-expanded also. Please find 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]

@JyotiKumari1507 can you create that as a stackblitz example?

[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

[khotcholava]

@droshev I believe this issue is fixed since I cant find aria-expanded property on table search toolbar.