A11y improvements (#130)

Adds role to the chat area for screen reader updates Adds Aria labels to forms and buttons
nlkitai · Aug 15, 2024 · 095d239 · 095d239
1 parent c16ee89
commit 095d239
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/packages/react/core/src/exports/AiChat.tsx b/packages/react/core/src/exports/AiChat.tsx
@@ -212,7 +212,7 @@ export const AiChat: <AiMsg>(
                             userDefinedGreeting={uiOverrides.Greeting}
                         />
                     </div>
-                    <div className="nlux-conversation-container" ref={conversationContainerRef}>
+                    <div className="nlux-conversation-container" ref={conversationContainerRef} aria-label="Chat conversation" role="log">
                         <ForwardConversationComp
                             ref={conversationRef}
                             segments={segments}

diff --git a/packages/react/core/src/sections/Composer/ComposerComp.tsx b/packages/react/core/src/sections/Composer/ComposerComp.tsx
@@ -78,12 +78,14 @@ export const ComposerComp = (props: ComposerProps) => {
                 value={props.prompt}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
+                aria-label={props.placeholder}
             />
             {!showCancelButton && (
                 <button
                     tabIndex={0}
                     disabled={disableButton}
                     onClick={() => props.onSubmit()}
+                    aria-label="Send"
                 >
                     {showSendIcon && <SendIconComp/>}
                     {!showSendIcon && props.Loader}
@@ -93,6 +95,7 @@ export const ComposerComp = (props: ComposerProps) => {
                 <button
                     tabIndex={0}
                     onClick={props.onCancel}
+                    aria-label="Cancel"
                 >
                     <CancelIconComp/>
                 </button>