[ACS-10242] SR: Personal files: Filter by Size popup announces entire content instead of dialog title (#11782)

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html

@@ -20,9 +20,18 @@
     </button>
 
     <mat-menu #filter="matMenu" class="adf-filter-menu adf-search-filter-menu" (closed)="onClosed()">
-        <div #filterContainer role="menuitem" tabindex="0" (keydown.tab)="$event.stopPropagation()">
+        <fieldset
-            <div (click)="$event.stopPropagation()" role="button" tabindex="0" (keyup.enter)="$event.stopPropagation()" class="adf-filter-container">
+            #filterContainer
-                <div class="adf-filter-title">{{ category?.name | translate }}</div>
+            tabindex="0"
+            [attr.aria-labelledby]="'filter-legend-' + category?.id"
+            (click)="$event.stopPropagation()"
+            (keyup.enter)="$event.stopPropagation()"
+            (keydown.tab)="$event.stopPropagation()"
+            class="adf-filter-container adf-filter-fieldset"
+        >
+            <legend class="adf-filter-title" [id]="'filter-legend-' + category?.id">
+                {{ category?.name | translate }}
+            </legend>
             <adf-search-widget-container
                 (keypress)="onKeyPressed($event, menuTrigger)"
                 [id]="category?.id"
@@ -31,7 +40,6 @@
                 [value]="initialValue"
                 [useHeaderQueryBuilder]="true"
             />
-            </div>
             <mat-dialog-actions class="adf-filter-actions">
                 <button
                     mat-button
@@ -52,6 +60,6 @@
                     {{ 'SEARCH.SEARCH_HEADER.APPLY' | translate | uppercase }}
                 </button>
             </mat-dialog-actions>
-        </div>
+        </fieldset>
     </mat-menu>
 </div>

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -15,10 +15,17 @@
         }
     }
 
+    &-fieldset {
+        border: none;
+        margin: 0;
+        padding: 0;
+        min-inline-size: 0;
+    }
+
     &-container {
         display: flex;
         flex-direction: column;
-        padding: 15.5px 15px 10px;
+        padding: 0;
         color: var(--adf-theme-foreground-text-color-087);
 
         .adf-facet-buttons {
@@ -36,9 +43,11 @@
 
     &-title {
         font-size: 1.1em;
-        padding-bottom: 5px;
+        padding: 16px 0 0 16px;
         color: var(--adf-theme-foreground-text-color-087);
         -webkit-font-smoothing: subpixel-antialiased;
+        float: none;
+        width: 100%;
     }
 }
 
@@ -51,6 +60,10 @@
         padding: 0;
     }
 
+    .adf-search-checklist {
+        margin: 4px 0 0 16px;
+    }
+
     .adf-filter-actions {
         display: flex;
         justify-content: flex-end;

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.spec.ts

@@ -19,7 +19,7 @@ import { Subject } from 'rxjs';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchService } from '../../services/search.service';
 import { SearchHeaderQueryBuilderService } from '../../services/search-header-query-builder.service';
-import { By, DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { SearchFilterContainerComponent } from './search-filter-container.component';
 import { SearchCategory } from '../../models/search-category.interface';
 import { HarnessLoader } from '@angular/cdk/testing';
@@ -141,7 +141,7 @@ describe('SearchFilterContainerComponent', () => {
         await menu.open();
 
         component.widgetContainer.componentRef.instance.value = 'searchText';
-        const widgetContainer = fixture.debugElement.query(By.css('adf-search-widget-container'));
+        const widgetContainer = unitTestingUtils.getByCSS('adf-search-widget-container');
         widgetContainer.triggerEventHandler('keypress', { key: 'Enter' });
 
         fixture.detectChanges();
@@ -207,5 +207,30 @@ describe('SearchFilterContainerComponent', () => {
             await menu.close();
             expect(await menu.isFocused()).toBe(true);
         });
+
+        it('should use a fieldset with aria-labelledby pointing to the legend', async () => {
+            const menu = await loader.getHarness(MatMenuHarness);
+            await menu.open();
+            fixture.detectChanges();
+
+            const fieldset = unitTestingUtils.getByCSS('fieldset.adf-filter-fieldset');
+            const legend = unitTestingUtils.getByCSS('legend.adf-filter-title');
+
+            expect(fieldset).toBeTruthy();
+            expect(legend).toBeTruthy();
+
+            const legendId = legend.nativeElement.getAttribute('id');
+            expect(legendId).toBe('filter-legend-' + mockCategory.id);
+            expect(fieldset.nativeElement.getAttribute('aria-labelledby')).toBe(legendId);
+        });
+
+        it('should have the legend text matching the category name', async () => {
+            const menu = await loader.getHarness(MatMenuHarness);
+            await menu.open();
+            fixture.detectChanges();
+
+            const legendText = unitTestingUtils.getInnerTextByCSS('legend.adf-filter-title');
+            expect(legendText.trim()).toBe(mockCategory.name);
+        });
     });
 });