Fix button issues #774
Fix button issues #774
Conversation
| *ngIf="isBusy" | ||
| [ngStyle]="getRippleContainerStyle()" | ||
| class="nui-button-ripple-container" | ||
| aria-live="polite" |
There was a problem hiding this comment.
aria-busy="true"
aria-live="polite"
Don't use aria-label or aria-labelledby on a span or div unless its given a role.
aria-label=Loading is not ok in this case since this element do not have content but only visual indicator of busy
| [ngStyle]="getRippleContainerStyle()" | ||
| class="nui-button-ripple-container" | ||
| aria-live="polite" | ||
| aria-atomic="true" |
There was a problem hiding this comment.
aria-atomic true I wouldn't use that because it force screen readers to read it contents
| @Input() public ariaLabel: string = ""; | ||
|
|
||
| /** Sets aria-disabled for disabled state programmatic indication */ | ||
| @HostBinding("attr.aria-disabled") |
There was a problem hiding this comment.
this should be on the control of the clients but not handle form the nova side
this is not correct because screen readers already rely on the native
https://ripple.watermarkinsights.com/blog/a-few-remarks-on-using-aria/
only valid case is next:
but as you can see it is under control of client code not nova.
|
|
||
| private validateIconOnlyButtonAccessibility(): void { | ||
| // Check if button will be icon-only and validate accessibility | ||
| setTimeout(() => { |
| merge(keyUp$, this.ngUnsubscribe) | ||
| ) | ||
| ) | ||
| .subscribe(() => { |
There was a problem hiding this comment.
subscribe in subscribe wow that is awesome code ! great ... kiding
this may lead to memory leaks and the code overcomplicated which makes it un readable
|
also respect the lint to fix the error. |
Frontend Pull Request Description
Volunteering fix of accessibility issues for button component.
Checklist
Screenshots (if applicable)
Additional Context (if necessary)