fix(phone-input): add role group, add separate aria labels for dropdo…

…wn and input (#1218) * feat(phone-input): grouped input fields * fix(phone-input): group aria-label * fix(phone-input): group aria-label * fix(phone-input): group aria-label * Update projects/ng-aquila/src/phone-input/phone-input.component.ts Co-authored-by: Edgar Garmel <[email protected]> * fix(phone-input): change default areaCodeLabel, remove unused * fix(phone-input): correct test * fix(dropdown): use strict equal operator * Update projects/ng-aquila/src/phone-input/phone-input-intl.ts Co-authored-by: Edgar Garmel <[email protected]> * Update projects/ng-aquila/src/phone-input/phone-input.component.ts Co-authored-by: Edgar Garmel <[email protected]> * fix(phone-input): add line number i18n * fix(phone-input): add line number i18n --------- Co-authored-by: Edgar Garmel <[email protected]>
allianz · Jul 1, 2024 · 3b1e23e · 3b1e23e
1 parent 820be6f
commit 3b1e23e
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 11 deletions.
diff --git a/...-aquila/documentation/examples/phone-input/phone-input-i18n/phone-input-i18n-example.html b/...-aquila/documentation/examples/phone-input/phone-input-i18n/phone-input-i18n-example.html
@@ -15,6 +15,7 @@
     <nx-phone-input
         [countryNames]="frenchCountries"
         areaCodeLabel="Indicatif régional"
+        lineNumberLabel="Numéro de ligne"
         [(ngModel)]="value"
         required
     ></nx-phone-input>

diff --git a/...ng-aquila/documentation/examples/phone-input/phone-input-i18n/phone-input-i18n-example.ts b/...ng-aquila/documentation/examples/phone-input/phone-input-i18n/phone-input-i18n-example.ts
@@ -12,6 +12,7 @@ countries.registerLocale(fr);
 export class MyPhoneInputIntl extends NxPhoneInputIntl {
     areaCodeLabel = 'Ländervorwahl';
     countryNames = countries.getNames('de', { select: 'official' });
+    lineNumberAriaLabel = 'Zeilennummer';
 }
 
 /** @title Phone Input Internationalization */

diff --git a/...ila/documentation/examples/phone-input/phone-input-retail/phone-input-retail-example.html b/...ila/documentation/examples/phone-input/phone-input-retail/phone-input-retail-example.html
@@ -1,5 +1,5 @@
 <nx-formfield>
-    <nx-formfield-label>Phone number</nx-formfield-label>
+    <nx-formfield-label>Private mobile phone number</nx-formfield-label>
     <nx-phone-input
         [(ngModel)]="value"
         required

diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -139,7 +139,7 @@ const _defaultValueFormatterFn: NxDropdownValueFormatterFn = value => (value ==
         '[class.nx-dropdown--disabled]': 'disabled',
         '[attr.aria-describedby]': 'ariaDescribedby || null',
         '[attr.aria-required]': 'required',
-        '[attr.aria-labelledby]': '_getAriaLabelledBy()',
+        '[attr.aria-labelledby]': '_getAriaLabelledBy() || null',
         '[attr.aria-controls]': 'modalId',
         '[attr.aria-invalid]': 'errorState',
         'aria-haspopup': 'listbox',
@@ -1003,15 +1003,14 @@ export class NxDropdownComponent
      * @docs-private
      */
     _getAriaLabelledBy(): string {
-        if (this.ariaLabelledBy) {
+        if (this.ariaLabelledBy !== null) {
             return this.ariaLabelledBy;
         }
-        const valueId = this.renderedValueId;
         const labelId = this.formFieldComponent?.labelId;
         if (labelId) {
             return labelId;
         }
-        return valueId;
+        return this.renderedValueId;
     }
 
     get _isInOutlineField(): boolean {

diff --git a/projects/ng-aquila/src/phone-input/phone-input-intl.ts b/projects/ng-aquila/src/phone-input/phone-input-intl.ts
@@ -14,7 +14,10 @@ export class NxPhoneInputIntl {
     readonly changes = new Subject<void>();
 
     /** The label that is shown at the top of the opened overlay. */
-    areaCodeLabel = 'Country code';
+    areaCodeLabel = 'Area code';
+
+    /** The aria-label that is used for the line number part of the phone number input */
+    lineNumberAriaLabel = 'Line Number';
 
     /** The object providing the country name translations. */
     countryNames: LocalizedCountryNames<any> = countries.getNames('en');

diff --git a/projects/ng-aquila/src/phone-input/phone-input.component.html b/projects/ng-aquila/src/phone-input/phone-input.component.html
@@ -10,6 +10,8 @@
         [options]="_sortedCountries"
         [overlayFallbackOrigin]="dropdown"
         [panelGrow]="true"
+        [attr.aria-label]="areaCodeLabel"
+        ariaLabelledBy=""
     >
         <span *nxClosedLabel>+{{ _getCallingCode(dropdown.value) }}</span>
     </nx-dropdown>
@@ -24,7 +26,7 @@
         [(ngModel)]="_inputValue"
         (ngModelChange)="_onInput()"
         [attr.aria-describedby]="_describedBy"
-        [attr.aria-labelledby]="_ariaLabelledBy"
+        [attr.aria-label]="lineNumberLabel"
         [attr.required]="required || null"
         [attr.disabled]="disabled || null"
         [attr.placeholder]="placeholder || null"
@@ -39,7 +41,7 @@
         [attr.aria-readonly]="readonly || null"
         [value]="_getReadonlyValue()"
         [attr.aria-describedby]="_describedBy"
-        [attr.aria-labelledby]="_ariaLabelledBy"
+        [attr.aria-label]="lineNumberLabel"
         [attr.aria-invalid]="errorState"
     />
 </div>
diff --git a/projects/ng-aquila/src/phone-input/phone-input.component.spec.ts b/projects/ng-aquila/src/phone-input/phone-input.component.spec.ts
@@ -49,7 +49,7 @@ describe('PhoneInputComponent', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [NxPhoneInputModule, ReactiveFormsModule, FormsModule],
-            declarations: [ReactiveFormsPhoneInput, I18nProviderTest, DefaultPhoneInput, ConfigurablePhoneInput, CustomFormatter],
+            declarations: [ReactiveFormsPhoneInput, I18nProviderTest, DefaultPhoneInput, ConfigurablePhoneInput, CustomFormatter, PhoneInputA11y],
             providers: [NxPhoneInputIntl],
         }).compileComponents();
 
@@ -358,6 +358,22 @@ describe('PhoneInputComponent', () => {
         expect(testInstance.phoneInput.countryCode).toBe('UA');
         expect(testInstance.phoneInput.inputFormatter).toHaveBeenCalled();
     }));
+
+    it('should set aria-label', () => {
+        createTestComponent(PhoneInputA11y);
+        fixture.detectChanges();
+
+        const areaCodeElement = dropdown.nativeElement;
+        const phoneInput = getInput().nativeElement;
+        expect(areaCodeElement.getAttribute('aria-label')).toBe('custom area code');
+        expect(areaCodeElement.getAttribute('aria-labelledby')).toBe(null);
+
+        expect(phoneInput.getAttribute('aria-label')).toBe('custom line number');
+        expect(phoneInput.getAttribute('aria-labelledby')).toBe(null);
+
+        const formfield = fixture.debugElement.query(By.directive(NxFormfieldComponent)).componentInstance;
+        expect(phoneInputInstance.elementRef.nativeElement.getAttribute('aria-labelledby')).toBe(formfield.labelId);
+    });
 });
 
 @Directive()
@@ -431,3 +447,10 @@ class CustomFormatter extends PhoneInputTest {
         return value.match(/.{1,2}/g)?.join(' ') || '';
     }
 }
+
+@Component({
+    template: `<nx-formfield label="Telephone number">
+        <nx-phone-input [countryCode]="countryCode" lineNumberLabel="custom line number" areaCodeLabel="custom area code"></nx-phone-input>
+    </nx-formfield>`,
+})
+class PhoneInputA11y extends PhoneInputTest {}
diff --git a/projects/ng-aquila/src/phone-input/phone-input.component.ts b/projects/ng-aquila/src/phone-input/phone-input.component.ts
@@ -41,6 +41,8 @@ let next = 0;
     ],
     host: {
         '[attr.id]': 'id',
+        '[role]': '"group"',
+        '[attr.aria-labelledby]': '_ariaLabelledBy',
     },
 })
 export class NxPhoneInputComponent implements ControlValueAccessor, NxFormfieldControl<any>, OnDestroy, DoCheck, OnInit, AfterViewInit, NxAbstractControl {
@@ -131,7 +133,7 @@ export class NxPhoneInputComponent implements ControlValueAccessor, NxFormfieldC
     }
     private _countryCode = 'DE';
 
-    /** Set the text at the top of the dropdown. The default value is 'Area Code'. */
+    /** Set the text at the top of the dropdown and aria-label of area code field. The default value is 'Area Code'. */
     @Input() set areaCodeLabel(value: string) {
         this._areaCodeLabel = value;
     }
@@ -140,6 +142,15 @@ export class NxPhoneInputComponent implements ControlValueAccessor, NxFormfieldC
     }
     private _areaCodeLabel!: string;
 
+    /** Sets the aria-label of line number field. */
+    @Input() set lineNumberLabel(value: string) {
+        this._lineNumberLabel = value;
+    }
+    get lineNumberLabel() {
+        return this._lineNumberLabel || this._intl.lineNumberAriaLabel;
+    }
+    private _lineNumberLabel: string = '';
+
     /** Set the translations of the countries. */
     @Input() set countryNames(value: LocalizedCountryNames<any>) {
         this._countryNames = value;

diff --git a/projects/ng-aquila/src/phone-input/phone-input.md b/projects/ng-aquila/src/phone-input/phone-input.md
@@ -52,7 +52,7 @@ Similar to validation the component doesn't provide formatting out of the box to
 
 ## Internationalization
 
-To set different translations of the countries and to change texts like the overlay label you can either override it via inputs in the template or set these via the `NxPhoneInputIntl` class provider.
+To set different translations of the countries and to change texts like the overlay label, line number and area code label you can either override it via inputs `lineNumberLabel`, `areaCodeLabel` in the template or set these via the `NxPhoneInputIntl` class provider.
 
 To get translations for the countries you can import a different locale from the `i18n-iso-countries` package. Please note: if you provide the `NxPhoneInputIntl` class and use the inputs of the component as well, the input values take precedence.