fix(components/forms): separate file attachment help inline button fr…

…om label (#2675)
blackbaud · Sep 5, 2024 · 67c1496 · 67c1496
1 parent 013caa5
commit 67c1496
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html b/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html
@@ -1,8 +1,6 @@
 <div class="sky-file-attachment-wrapper">
   <div
-    #labelRef="skyId"
     class="sky-file-attachment-label-wrapper"
-    skyId
     [ngClass]="{
       'sky-control-label-required':
         !labelText && isRequired && hasLabelComponent
@@ -12,20 +10,13 @@
       @if (!labelHidden) {
         <span
           class="sky-control-label sky-margin-inline-xs"
+          [attr.id]="labelId"
           [ngClass]="{
             'sky-control-label-required': isRequired
           }"
           >{{ labelText }}</span
         >
       }
-      @if (helpPopoverContent || helpKey) {
-        <sky-help-inline
-          [labelText]="labelText"
-          [helpKey]="helpKey"
-          [popoverTitle]="helpPopoverTitle"
-          [popoverContent]="helpPopoverContent"
-        />
-      }
     } @else {
       <ng-content select="sky-file-attachment-label" />
     }
@@ -34,6 +25,14 @@
         'skyux_file_attachment_required' | skyLibResources
       }}</span>
     }
+    @if (labelText && (helpPopoverContent || helpKey)) {
+      <sky-help-inline
+        [labelText]="labelText"
+        [helpKey]="helpKey"
+        [popoverTitle]="helpPopoverTitle"
+        [popoverContent]="helpPopoverContent"
+      />
+    }
   </div>
   <div
     class="sky-file-attachment-upload sky-file-attachment sky-file-attachment-target"
@@ -77,7 +76,7 @@
           attachButtonLabelRef.id
             | skyFileAttachmentJoinIds
               : (labelText
-                  ? labelRef.id
+                  ? labelId
                   : labelComponents?.get(0)?.labelContentId?.id)
         "
         [disabled]="disabled"
@@ -126,7 +125,9 @@
         [attr.aria-labelledby]="
           deleteButtonLabelRef.id
             | skyFileAttachmentJoinIds
-              : labelComponents?.get(0)?.labelContentId?.id
+              : (labelText
+                  ? labelId
+                  : labelComponents?.get(0)?.labelContentId?.id)
         "
         [disabled]="disabled"
         [skyThemeClass]="{

diff --git a/...s/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts b/...s/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts
@@ -1473,7 +1473,9 @@ describe('File attachment', () => {
 
     expect(btn?.getAttribute('aria-describedby')).toEqual('MOCK_ID_3');
     expect(btn?.getAttribute('aria-labelledby')).toEqual('MOCK_ID_5 MOCK_ID_2');
-    expect(deleteBtn?.getAttribute('aria-labelledby')).toEqual('MOCK_ID_6');
+    expect(deleteBtn?.getAttribute('aria-labelledby')).toEqual(
+      'MOCK_ID_6 MOCK_ID_2',
+    );
 
     await expectAsync(fixture.nativeElement).toBeAccessible();
 

diff --git a/...onents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts b/...onents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts
@@ -302,6 +302,7 @@ export class SkyFileAttachmentComponent
 
   protected ngControl: NgControl | undefined;
   protected errorId = this.#idSvc.generateId();
+  protected labelId = this.#idSvc.generateId();
 
   protected fileErrorName: SkyFileItemErrorType | undefined;
   protected fileErrorParam: string | undefined;