Overview

The useAriaPropsSupportedByRole biome rule needs to be enabled for the @liam-hq/app package to improve accessibility by ensuring ARIA attributes are used correctly with appropriate HTML elements. After enabling this rule, lint errors have been detected that need to be fixed.

Steps to Enable the Rule

1. Update frontend/apps/app/biome.jsonc with the following configuration:

{
  "extends": "//",
  "root": false,
  "linter": {
    "rules": {
      "a11y": {
        "useAriaPropsSupportedByRole": "error"
      }
    }
  }
}

This overrides the base configuration in frontend/internal-packages/configs/biome.jsonc where useAriaPropsSupportedByRole is set to "off".

2. Run lint to see the errors:

cd frontend/apps/app && pnpm lint:biome

Lint Errors to Fix

After enabling the rule, useAriaPropsSupportedByRole errors appear in the following files:

• components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.tsx
• components/SessionDetailPage/components/Chat/components/ChatInput/components/MentionSuggestor/MentionSuggestor.tsx

These violations can lead to:

• Poor screen reader compatibility in chat functionality
• Accessibility issues for users with disabilities using the chat feature
• Non-compliant ARIA attribute usage in interactive elements
• Confusing navigation for assistive technologies in mention suggestions

Root Cause

The chat components contain ARIA attributes that are not supported by their HTML elements:

• <textarea> element with aria-expanded attribute (not supported by textarea)
• <button> element with aria-selected attribute (requires specific roles to be valid)

Required Fix Patterns

Fix 1: Handle Textarea Expandable State

// Before
<textarea aria-expanded={isExpanded} />

// After - Use proper container with role for expandable UI
<div role="combobox" aria-expanded={isExpanded}>
  <textarea />
</div>

// Or remove aria-expanded if not needed for popover state
<textarea />

Fix 2: Fix Button Selection State

// Before
<button aria-selected={isSelected}>

// After - Add appropriate role for selectable items
<button role="option" aria-selected={isSelected}>

// Or use different pattern for selection state
<button aria-pressed={isSelected} className={isSelected ? 'selected' : ''}>

Action Items

• Enable the useAriaPropsSupportedByRole: "error" rule in frontend/apps/app/biome.jsonc
• Run pnpm lint:biome to identify all ARIA attribute violations
• Fix ARIA attribute usage in:
  • components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.tsx
  • components/SessionDetailPage/components/Chat/components/ChatInput/components/MentionSuggestor/MentionSuggestor.tsx
• Choose appropriate fix method for each violation (proper roles, container patterns, or alternative approaches)
• Run pnpm lint to verify all errors are resolved
• Test chat functionality with screen readers to ensure accessibility improvements
• Verify that mention suggestions and chat input remain fully functional

Testing

After implementing all fixes:

1. All lint errors should be resolved
2. Chat input and mention suggestion features should maintain full functionality
3. Screen reader compatibility should be improved for chat interactions
4. ARIA attributes should only be used on elements that support them
5. Chat accessibility should be enhanced for users with disabilities

Related

• Issue Enable useAriaPropsSupportedByRole biome rule for @liam-hq/erd-core package #3446 - Similar fix for erd-core package
• Part of the broader effort to enforce useAriaPropsSupportedByRole across all packages for better accessibility