microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Home Page:https://react.fluentui.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: Chat component accessibility issue

thisiskrishna opened this issue · comments

Library

React / v8 (@fluentui/react)

System Info

import { Chat, ChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';

Are you reporting Accessibility issue?

Yes

Reproduction

https://microsoft.github.io/fluentui-contrib/react-chat/?path=/story/chat--default

Bug Description

Actual Behavior

Screenshot 2024-06-28 101951

Focusable content not have have tabindex="-1"

Expected Behavior

Focusable content not have have tabindex="-1" or be removed from the DOM

Logs

Title: WCAG 4.1.2: Ensures aria-hidden elements are not focusable nor contain focusable elements (i:nth-child(4))
Tags: Accessibility, WCAG 4.1.2, aria-hidden-focus

Issue: Ensures aria-hidden elements are not focusable nor contain focusable elements (aria-hidden-focus - https://accessibilityinsights.io/info-examples/web/aria-hidden-focus)

Target application: Chat - Default ⋅ Storybook - https://microsoft.github.io/fluentui-contrib/react-chat/?path=/story/chat--default

Element path: #storybook-preview-iframe;.fui-Chat > i:nth-child(4)

Snippet: <i tabindex="0" role="none" data-tabster-dummy="" aria-hidden="true" style="position: fixed; height: 1px; width: 1px; opacity: 0.001; z-index: -1; content-visibility: hidden; top: 0px; left: 0px;"></i>

How to fix: 
Fix all of the following:
  Focusable content should have tabindex="-1" or be removed from the DOM

Environment: Microsoft Edge version 126.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.43.0 (axe-core 4.8.4), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Hi! Thanks for running accessibility tests and filing the issue 😊. This is actually a known false positive that we have documented on our internal know issues wiki. Hope that helps you close your bug!