fix accessibilty on file selector while navigating with arrow keys

projects/angular-ui/src/lib/file/file-input.component.html

@@ -15,14 +15,14 @@
   <button
     bao-button
     [id]="inputId + '-button'"
-    [attr.aria-labelledby]="inputId + '-label'"
+    [attr.aria-labelledby]="inputId + '-label ' + inputId + '-button'"
     type="button"
     displayType="utility"
     level="secondary"
     [disabled]="disabled"
     (click)="uploader.click()"
   >
-    <span>{{ intl.dropzoneButtonLabel }}</span>
+    {{ intl.dropzoneButtonLabel }}
   </button>
   <input
     [id]="inputId"

projects/angular-ui/src/lib/file/file-input.component.spec.ts

@@ -101,14 +101,11 @@ describe('BaoFileInputComponent', () => {
       expect(dropZone.length).toBe(1);
       const innerHelperText = helperText[0].nativeNode.firstElementChild;
       const buttonElement = dropZone[0].nativeNode.children.item(0);
-      const buttonSpan = buttonElement.firstElementChild;
 
-      expect(buttonElement.attributes['aria-describedby']).toBeDefined();
-      expect(buttonSpan.id).toBeDefined();
       expect(innerHelperText.id).toBeDefined();
-
+      expect(buttonElement.attributes['aria-describedby']).toBeDefined();
       expect(buttonElement.attributes['aria-describedby'].value).toBe(
-        `${innerHelperText.id} ${buttonSpan.id}`
+        `${innerHelperText.id}`
       );
     });
     it('should display text in french by default', () => {

projects/angular-ui/src/lib/file/file-input.component.ts

@@ -271,41 +271,29 @@
   }
 
   private setDescribedByAttribute(): void {
-    this._helperTextId = `bao-guiding-text-${fileTextUniqueId++}`;
-    const buttonText = `${this._helperTextId}-label`;
-    const describedbyIds = [];
+    this._helperTextId = `bao-file-input-bao-guiding-text-${fileTextUniqueId++}`;
 
     const helperText = Array.from(this.nativeElement.children).find(
       (el: HTMLElement) => el.localName === 'bao-guiding-text'
     );
 
     if (helperText) {
-      describedbyIds.push(this._helperTextId);
       this.renderer.setAttribute(
         helperText.firstElementChild,
         'id',
         this._helperTextId
       );
     }
 
-    const inputElement = Array.from(this.nativeElement.children)
+    const buttonElement = Array.from(this.nativeElement.children)
       .find((el: HTMLElement) => el.className == 'file-drop-zone')
       .children.item(0);
 
-    if (inputElement) {
-      describedbyIds.push(buttonText);
+    if (buttonElement) {
       this.renderer.setAttribute(
-        inputElement.firstElementChild,
-        'id',
-        buttonText
-      );
-    }
-
-    if (describedbyIds.length) {
-      this.renderer.setAttribute(
-        inputElement,
+        buttonElement,
         'aria-describedby',
-        describedbyIds.filter(String).join(' ')
+        this._helperTextId
       );
     }
   }
@@ -316,22 +304,22 @@
       (el: HTMLElement) => el.localName == 'bao-error'
     );
     errors.forEach((errorText: HTMLElement) => {
-      const errorTextId = `bao-error-${fileTextUniqueId++}`;
+      const errorTextId = `bao-file-input-bao-error-${fileTextUniqueId++}`;
       this.renderer.setAttribute(
         errorText.firstElementChild,
         'id',
         errorTextId
       );
       textsIds.push(errorTextId);
     });
-    const inputElement = Array.from(this.nativeElement.children)
+    const buttonElement = Array.from(this.nativeElement.children)
       .find((el: HTMLElement) => el.classList.contains('file-drop-zone'))
-      .children.item(1);
+      .children.item(0);
     if (this._helperTextId) {
       textsIds.unshift(this._helperTextId);
     }
     this.renderer.setAttribute(
-      inputElement,
+      buttonElement,
       'aria-describedby',
       textsIds.join(' ')
     );
@@ -373,7 +361,7 @@
 
   private getDataTransfer(event: DragEvent | any): DataTransfer {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return event.dataTransfer
       ? event.dataTransfer
       : event.originalEvent.dataTransfer;
   }