Skip to content

Commit b826391

Browse files
Enable useAriaPropsSupportedByRole biome rule and fix ARIA violations
- Enable useAriaPropsSupportedByRole rule in biome.jsonc for @liam-hq/app package - Fix ChatInput textarea ARIA attributes by removing unsupported role and attributes - Add role="option" to MentionSuggestor buttons to support aria-selected - Add role="listbox" to MentionSuggestor container for proper ARIA pattern - Maintain accessibility while ensuring biome rule compliance 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: FunamaYukina <FunamaYukina@users.noreply.github.com>
1 parent 0114447 commit b826391

File tree

3 files changed

+8
-8
lines changed

3 files changed

+8
-8
lines changed

frontend/apps/app/biome.jsonc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"rules": {
66
"nursery": {
77
"useUniqueElementIds": "error"
8+
},
9+
"a11y": {
10+
"useAriaPropsSupportedByRole": "error"
811
}
912
}
1013
}

frontend/apps/app/components/SessionDetailPage/components/Chat/components/ChatInput/ChatInput.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -192,13 +192,9 @@ export const ChatInput: FC<Props> = ({
192192
className={styles.input}
193193
rows={1}
194194
data-error={error ? 'true' : undefined}
195-
{...{
196-
role: 'combobox',
197-
}}
198-
aria-controls={mentionSuggestorId}
199-
aria-expanded={isMentionSuggestorOpen}
200-
aria-autocomplete="list"
201-
aria-haspopup="listbox"
195+
aria-controls={
196+
isMentionSuggestorOpen ? mentionSuggestorId : undefined
197+
}
202198
onChange={handleChange}
203199
onKeyDown={handleKeyDown}
204200
onCompositionStart={handleCompositionStart}

frontend/apps/app/components/SessionDetailPage/components/Chat/components/ChatInput/components/MentionSuggestor/MentionSuggestor.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export const MentionSuggestor = ({
143143
if (!enabled) return null
144144

145145
return (
146-
<div ref={containerRef} className={styles.wrapper} id={id}>
146+
<div ref={containerRef} className={styles.wrapper} id={id} role="listbox">
147147
{matches.length === 0 ? (
148148
<div className={styles.emptyMessage} aria-disabled="true">
149149
{DEFAULT_NO_ITEMS_MESSAGE}
@@ -153,6 +153,7 @@ export const MentionSuggestor = ({
153153
<button
154154
key={item.id}
155155
type="button"
156+
role="option"
156157
className={styles.suggestorItem}
157158
aria-selected={highlightedIndex === i}
158159
data-index={i}

0 commit comments

Comments
 (0)