fix(atomic): accessibility fixes for common and search components

.sisyphus/notepads/a11y-cleanup-and-extraction/learnings.md

@@ -0,0 +1,46 @@
+
+## Task 5: Component A11y Fixes - Common & Search Components
+
+### Completed (2/7 commits):
+1. ✅ **e4d8bfcf1** - Aside landmark aria-labels
+   - Added aria-label to all aside elements in refine modals, generated answer, smart snippets
+   - Updated refine modal body signature to accept i18n parameter
+   - Added locale strings: refine-modal-content, user-actions-content
+   - Files: refine-modal/body.ts, stencil-body.tsx, generated-answer-common.tsx, smart-snippet*.tsx, locales.json
+
+2. ✅ **2ee9eb302** - Results per page toolbar aria
+   - Removed redundant role='toolbar' and aria-label from results-per-page
+   - The FieldsetGroup already provides proper labeling
+   - File: atomic-results-per-page.tsx
+
+### Remaining (5/7 commits):
+3. ⏳ **5ef4bf906** - Search box/breadbox accessibility (13 files)
+   - aria-label for breadbox clear buttons
+   - aria-label for search box clear buttons  
+   - aria-live announcements for query changes
+   - New locale strings for clear buttons
+
+4. ⏳ **75b21afe5 + 7135cf56b** - Pager accessibility (14 files total)
+   - Keyboard navigation improvements (arrow keys, home/end)
+   - ARIA attributes for pager buttons
+   - Radio button accessibility enhancements
+   - Includes spec file updates
+
+5. ⏳ **c3acb1f45** - Nested interactive fix (4 files)
+   - Restructure suggestion renderer to avoid nested interactive elements
+   - Accessibility violation fix
+
+6. ⏳ **ab843eeb5** - Additional locale strings (1 file)
+   - More accessibility-related translations
+
+### Challenges Encountered:
+- Cherry-pick conflicts due to codebase evolution (Lit migrations, refactorings)
+- Need to manually apply changes from commit diffs
+- Large number of files across commits 3-6 (32+ files total)
+- E2e test file changes excluded per requirements
+
+### Technical Notes:
+- Spec files must be included (they test the a11y fixes)
+- Story files must be excluded (no formatting changes allowed)
+- LSP errors in atomic-results-per-page are pre-existing
+- All changes require manual application due to conflicts

packages/atomic/src/components/common/atomic-suggestion-renderer/atomic-suggestion-renderer.tsx

@@ -1,7 +1,7 @@
 import {isMacOS} from '@/src/utils/device-utils';
 import {Component, Fragment, Host, Prop, VNode, h} from '@stencil/core';
 import {i18n} from 'i18next';
-import {SearchBoxSuggestionElement} from '../suggestions/suggestions-common';
+import {SearchBoxSuggestionElement} from '../suggestions/suggestions-types';
 
 /**
  * The `atomic-suggestion-renderer` component is used to render individual suggestions. It was created to isolate
@@ -25,7 +25,7 @@ export class AtomicSuggestionRenderer {
   @Prop() public lastIndex!: number;
   @Prop() public isDoubleList!: boolean;
   @Prop() public onClick?: (e: Event) => void;
-  @Prop() public onMouseOver?: (e: Event) => void;
+  @Prop() public onMouseEnter?: (e: Event) => void;
 
   private get parts() {
     let part = 'suggestion';
@@ -106,14 +106,14 @@ export class AtomicSuggestionRenderer {
     return (
       <Host class="contents">
         {isButton ? (
-          <button
+          <div
             id={this.id}
             key={this.suggestion.key}
             part={this.parts}
             class={this.classes}
             onMouseDown={(e) => e.preventDefault()}
             onClick={(e: Event) => this.onClick?.(e)}
-            onMouseOver={(e: Event) => this.onMouseOver?.(e)}
+            onMouseEnter={(e: Event) => this.onMouseEnter?.(e)}
             data-query={this.suggestion.query}
             aria-label={this.ariaLabel(isButton)}
             ref={(el) => {
@@ -124,7 +124,7 @@ export class AtomicSuggestionRenderer {
             }}
           >
             {this.content}
-          </button>
+          </div>
         ) : (
           <span
             id={this.id}

packages/atomic/src/components/common/breadbox/breadcrumb-button.spec.ts

@@ -1,15 +1,21 @@
 import type {i18n} from 'i18next';
 import {html} from 'lit';
 import {beforeAll, beforeEach, describe, expect, it, vi} from 'vitest';
+import {AriaLiveRegionController} from '@/src/utils/accessibility-utils';
 import {renderFunctionFixture} from '@/vitest-utils/testing-helpers/fixture';
 import {createTestI18n} from '@/vitest-utils/testing-helpers/i18n-utils';
 import {renderBreadcrumbButton} from './breadcrumb-button';
 
 describe('#renderBreadcrumbButton', () => {
   let i18n: i18n;
-
+  let ariaController: AriaLiveRegionController;
   beforeAll(async () => {
     i18n = await createTestI18n();
+    ariaController = vi.spyOn(
+      AriaLiveRegionController.prototype,
+      'message',
+      'set'
+    ) as unknown as AriaLiveRegionController;
   });
 
   const renderComponent = async (overrides = {}) => {
@@ -27,6 +33,7 @@ describe('#renderBreadcrumbButton', () => {
             formattedValue: ['test'],
             deselect: () => {},
           },
+          ariaController: ariaController,
           ...overrides,
         },
       })(html`<span>Test</span>`)}`
@@ -122,6 +129,7 @@ describe('#renderBreadcrumbButton', () => {
     button?.click();
 
     expect(onSelectBreadcrumb).toHaveBeenCalled();
+    expect(ariaController.message).toBe('Filter removed');
   });
 
   it('should render the children', async () => {

packages/atomic/src/components/common/breadbox/breadcrumb-button.ts

@@ -1,6 +1,7 @@
 import type {i18n} from 'i18next';
 import {html} from 'lit';
 import {keyed} from 'lit/directives/keyed.js';
+import type {AriaLiveRegionController} from '@/src/utils/accessibility-utils';
 import type {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
 import {renderButton} from '../button';
 import type {Breadcrumb} from './breadcrumb-types';
@@ -15,6 +16,7 @@ export interface BreadcrumbButtonProps {
   pathLimit: number;
   breadcrumb: Breadcrumb;
   i18n: i18n;
+  ariaController: AriaLiveRegionController;
 }
 
 export const renderBreadcrumbButton: FunctionalComponentWithChildren<
@@ -46,7 +48,12 @@ export const renderBreadcrumbButton: FunctionalComponentWithChildren<
                   value: title,
                 }
               ),
-              onClick: props.onSelectBreadcrumb,
+              onClick: () => {
+                props.ariaController.message = props.i18n.t('filter-removed', {
+                  value: title,
+                });
+                props.onSelectBreadcrumb();
+              },
             },
           })(children)}
         </li>`

packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx

@@ -455,7 +455,13 @@ export class GeneratedAnswerCommon {
     if (this.hasNoAnswerGenerated) {
       return cannotAnswer && this.hasCustomNoAnswerMessage ? (
         <div>
-          <aside class={contentClasses} part="container">
+          <aside
+            class={contentClasses}
+            part="container"
+            aria-label={this.props
+              .getBindings()
+              .i18n.t('generated-answer-title')}
+          >
             <article>{this.renderCustomNoAnswerMessage()}</article>
           </aside>
         </div>
@@ -464,7 +470,11 @@ export class GeneratedAnswerCommon {
 
     return (
       <div>
-        <aside class={contentClasses} part="container">
+        <aside
+          class={contentClasses}
+          part="container"
+          aria-label={this.props.getBindings().i18n.t('generated-answer-title')}
+        >
           <article>{this.renderContent()}</article>
         </aside>
       </div>