reactjs - Incorporating keyboard accessibility to React chatbot component - Stack Overflow

admin管理员组

文章数量:1336181

I am working to ensure that the chatbot component in my React app is fully accessible. My issue incorporating keyboard accessibility is below. I am using Chatbot from "react-chatbot-kit".

Individual chats do not have focus, only links inside the chat responses (and it's a helpbot, so it renders a lot) receive focus when navigating via keyboard. So, a user has to tab through lines of links to get back to the input field to ask more questions. Ideally a keyboard user should be able to use arrow keys to navigate through the conversation, and if they want to see the links, they can press 'enter' to then tab through links in the selected response.

To address this, I have tried adding tabIndex={0}, data-is-focusable={true}, and role="article" to the response component. tabIndex did allow for individual chatbot responses to be focusable, but that only added another component to tab through, since all the links were still receiving focus as well.

My chatbot component is below (currently not keyboard accessible)

import Chatbot from "react-chatbot-kit";

<div aria-live="polite" tabIndex={0} role="article">
    <Chatbot
        key={this.key}
        config={Config}
        messageParser={MessageParser}
        actionProvider={ActionProvider}
    />
</div>

The config renders the chatbot response as a custom component, a ChatbotResponseWidget

export class ChatbotResponseWidget extends React.Component<MarkdownWidgetProps> {
    public render() {
        return (
            <Stack role="article">
                <ReactMarkdown source={this.props.message} renderers={renderers} />
            </Stack>
    )}
}

I also tried removing my custom component, and the issue persists with the default rendered components as well.

I believe it may be possible to get into the nitty gritty and manually code out the desired behavior, but I'm posting here looking for attributes or render methods that React might have already created for the chatbot component that accomplishes the desired behavior.

Or, if there is a better way to incorporate keyboard accessibility in this scenario, I would be grateful to hear that as well.

本文标签： reactjsIncorporating keyboard accessibility to React chatbot componentStack Overflow