Fix ARIA labels on submission form relationship button and dynamic dropdowns

This commit is contained in:
Tim Donohue
2023-09-01 09:47:32 -05:00
parent 53d521a87e
commit aeea1cd592
2 changed files with 5 additions and 4 deletions

View File

@@ -45,7 +45,9 @@
<button class="btn btn-secondary" <button class="btn btn-secondary"
type="button" type="button"
ngbTooltip="{{'form.lookup-help' | translate}}" ngbTooltip="{{'form.lookup-help' | translate}}"
[attr.aria-label]="'form.lookup-help' | translate"
placement="top" placement="top"
data-test="lookup-button"
(click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i> (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
</button> </button>
</div> </div>

View File

@@ -2,14 +2,15 @@
<div class="position-relative right-addon" <div class="position-relative right-addon"
role="combobox" role="combobox"
[attr.aria-label]="model.label" [attr.aria-label]="model.label"
[attr.aria-owns]="'combobox_' + id + '_listbox'"> [attr.aria-owns]="'combobox_' + id + '_listbox'"
[attr.aria-expanded]="sdRef.isOpen()"
[attr.aria-activedescendant]="(currentValue | async) ? 'combobox_' + id + '_selected' : null">
<i *ngIf="!model.readOnly" ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle" <i *ngIf="!model.readOnly" ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
aria-hidden="true"></i> aria-hidden="true"></i>
<i *ngIf="model.readOnly" class="dropdown-toggle position-absolute toggle-icon" <i *ngIf="model.readOnly" class="dropdown-toggle position-absolute toggle-icon"
aria-hidden="true"></i> aria-hidden="true"></i>
<input class="form-control" <input class="form-control"
[attr.aria-controls]="'combobox_' + id + '_listbox'" [attr.aria-controls]="'combobox_' + id + '_listbox'"
[attr.aria-activedescendant]="'combobox_' + id + '_selected'"
[attr.aria-label]="model.placeholder" [attr.aria-label]="model.placeholder"
[attr.autoComplete]="model.autoComplete" [attr.autoComplete]="model.autoComplete"
[class.is-invalid]="showErrorMessages" [class.is-invalid]="showErrorMessages"
@@ -28,8 +29,6 @@
<div ngbDropdownMenu <div ngbDropdownMenu
class="dropdown-menu scrollable-dropdown-menu w-100" class="dropdown-menu scrollable-dropdown-menu w-100"
aria-haspopup="true"
aria-expanded="false"
[attr.aria-label]="model.placeholder"> [attr.aria-label]="model.placeholder">
<div class="scrollable-menu" <div class="scrollable-menu"
role="listbox" role="listbox"