SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
263 stars 126 forks source link

Accessibility issue for fd-select control #9963

Open WangmoZhu opened 1 year ago

WangmoZhu commented 1 year ago

Is this a bug, enhancement, or feature request?

accessibility issue

Briefly describe your proposal.

the aria-readonly attribute is not allowed on div element

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

Angular version: 14.2.10 Fundamental library: 0.36.3

If this is a bug, please provide steps for reproducing it.

Please provide relevant source code if applicable.

<fd-select #select id="measure" i18n-placeholder="Select a measure|Select a measure@@CUBE_DASHBOARD.HEADFILTERS.SelectAMeasure" placeholder="Select a measure" [value]="measure" (valueChange)="measure = select.value; handleMeasureSelect(select.value)"> <li fd-option *ngFor="let value of measureValues" [attr.aria-label]="value.key" [value]="value.key"> {{value.desc}} </li> </fd-select> produce html element: <div role="list" aria-live="polite" class="fd-select__control" tabindex="0" id="fd-select-0" aria-active="false" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-controls="fd-select-0-list-box" aria-haspopup="true" aria-required="false" title="Order amount (CNY)" aria-label="Select a measure" aria-selected="true" aria-labelledby="fd-form-label-1"><div role="listitem" class="fd-select__text-content" aria-label="Order amount (CNY)"> Order amount (CNY) <!--ng-container--><!--container--></div><button fd-button="" tabindex="-1" class="fd-button fd-button--standard fd-button--transparent fd-select__button" ng-reflect-disabled="false" ng-reflect-glyph="slim-arrow-down" type="button"><fd-icon role="presentation" ng-reflect-glyph="slim-arrow-down" class="sap-icon--slim-arrow-down"></fd-icon><!--ng-container--><!--bindings={ "ng-reflect-ng-if": "slim-arrow-down" }--><!--bindings={}--><!--bindings={ "ng-reflect-ng-if": "false" }--><!--bindings={ "ng-reflect-ng-if": "false" }--></button><!--bindings={ "ng-reflect-ng-if": "true" }--></div>

Is there anything else we should know?

varsha026 commented 1 year ago

@fundamental-bot : Can someone help check this? As it causes many accessibility issues across applications

droshev commented 6 months ago

@WangmoZhu Can you check with the latest version?

droshev commented 3 months ago

@WangmoZhu Any update?