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

2026-09-09 18:03:21 +00:00 · 2026-04-01 14:53:44 +02:00
parent 2cd51b4789
commit 79871455f4
3 changed files with 63 additions and 17 deletions
@@ -20,18 +20,26 @@
    </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()">
-            <div (click)="$event.stopPropagation()" role="button" tabindex="0" (keyup.enter)="$event.stopPropagation()" class="adf-filter-container">
-                <div class="adf-filter-title">{{ category?.name | translate }}</div>
-                <adf-search-widget-container
-                    (keypress)="onKeyPressed($event, menuTrigger)"
-                    [id]="category?.id"
-                    [selector]="category?.component?.selector"
-                    [settings]="category?.component?.settings"
-                    [value]="initialValue"
-                    [useHeaderQueryBuilder]="true"
-                />
-            </div>
+        <fieldset
+            #filterContainer
+            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"
+                [selector]="category?.component?.selector"
+                [settings]="category?.component?.settings"
+                [value]="initialValue"
+                [useHeaderQueryBuilder]="true"
+            />
            <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>
@@ -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;
@@ -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);
+        });
    });
 });