SAP / fundamental-ngx

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

fd-select with role as list but with aria-readonly and aria-selected is not allowed #10155

Open truezn opened 1 year ago

truezn commented 1 year ago

Is this a bug, enhancement, or feature request?

Accessibility

Briefly describe your proposal.

fd-select have defined the div with role as list, but suppose the aria-readonly attribute should not use on list role element. please refer https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly,

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

Angular: 14.2.5 Fundamental: 0.36.3-rc.4

Please provide relevant source code if applicable.

<div aria-selected="true" aria-labelledby="quote-form-deliver-to-label" title="United States - Alabama" aria-required="false" aria-haspopup="true" aria-controls="fd-select-2-list-box" aria-readonly="false" aria-disabled="false" aria-expanded="false" aria-active="false" id="fd-select-2" tabindex="0" class="fd-select__control" aria-live="polite" role="list"><div aria-label="United States - Alabama" class="fd-select__text-content" role="listitem">United States - Alabama</div><button type="button" ng-reflect-glyph="slim-arrow-down" ng-reflect-disabled="false" class="fd-button fd-button--standard fd-button--transparent fd-select__button" tabindex="-1" fd-button=""><div class="sap-icon--slim-arrow-down" ng-reflect-glyph="slim-arrow-down" role="presentation"></div></button></div>

The aria-readonly attribute is not allowed on this DIV

image

truezn commented 1 year ago

Another similar issue with aria-selected, which is not valid with role list. image

droshev commented 6 months ago

We need to test whether this was resolved already.