Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Missing aria-hidden set false/true when dropdown show/hide #943

Closed
Lexachoc opened this issue Aug 6, 2024 · 6 comments · Fixed by #944
Closed

Missing aria-hidden set false/true when dropdown show/hide #943

Lexachoc opened this issue Aug 6, 2024 · 6 comments · Fixed by #944

Comments

@Lexachoc
Copy link
Contributor

Lexachoc commented Aug 6, 2024 •
edited
Loading

Describe the bug

warning message in console from Chrome:

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

To Reproduce
This warning from Chrome is because I have make the input field within the dropdown focused when open the dropdown when using Chrome (after recent updates).

Open a dropdown and then click on the input field to focus it. The error is shown in the console. (can only occur with the new Chrome version)

Expected behavior
The arial-hidden attribute should be removed when dropdown showing and set true when hiding.

Desktop (please complete the following information):

  • OS: Win 10

  • Browser Chrome Version 127.0.6533.89 (Official Build) (64-bit)

  • Flowbite version: 2.5.1
@Lexachoc Lexachoc mentioned this issue Aug 6, 2024
Merged
@angelofan
Copy link

angelofan commented Aug 8, 2024 •
edited
Loading

The same error will appear in the console when using sidebar and input together.

image

@Lexachoc
Copy link
Contributor Author

Lexachoc commented Aug 9, 2024 •
edited
Loading

@angelofan I replace the item in https://flowbite.com/docs/components/sidebar/#off-canvas-sidebar with an input field from https://flowbite.com/docs/forms/input-field/#input-fields.

But I didn't get the error in console. And in the source code:
https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts#L131
https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts#L179

It seems that the aria-hidden attribute is set and removed properly.

Do you have an example to reproducible the error of using the off canvas sidebar with input?

@angelofan
Copy link

HTML code

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css"  rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="relative font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen overflow-x-hidden">
    <main class="px-4 pt-24 flex flex-col gap-4">
        <div class="w-full max-w-screen-xl mx-auto bg-white dark:bg-gray-800 border-2 dark:border-gray-700 rounded-xl overflow-hidden">
            <div class="mx-auto text-gray-800 dark:text-gray-100">
                <div class="relative h-[calc(100vh-120px)]" x-data='{
                    search_user_popover_open: false,
                }'>
                    <aside id="default-sidebar" class="h-full overflow-y-auto ez-scrollbar bg-gray-50 dark:bg-gray-900 absolute top-0 left-0 z-[38] w-64 transition-transform sm:translate-x-0 border-r dark:border-gray-700 -translate-x-full" aria-label="Sidebar" aria-hidden="true">
                        <div class="h-full px-3 flex flex-col">
                            <div class="sticky top-0 bg-gray-50 dark:bg-gray-900 border-b dark:border-gray-700 py-4">
                                <div class="flex items-center gap-1">
                                    <div x-data="{
                                        popoverArrow: false,
                                        popoverPosition: 'bottom',
                                        popoverHeight: 0,
                                        popoverOffset: 8
                                    }" class="w-full">
                                        <div class="relative">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                    <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"></path>
                                                </svg>
                                            </div>
                                            <input type="search" id="search" x-model="search_user_text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </aside>
                    <div class="relative h-full sm:ml-64 flex flex-col justify-between">
                        <div class="mx-4 mt-2 md:mt-4 flex items-center justify-between gap-2">
                            <div class="flex items-center gap-4">
                                <button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                                    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
</body>

</html>

Video of steps to reproduce

reproduce.mp4

@angelofan
Copy link

@Lexachoc Rotating the phone screen will also display this error.

reproduce-1.mp4

@Lexachoc
Copy link
Contributor Author

Lexachoc commented Aug 9, 2024

@angelofan Thank you for the video! I see the problem now.
I think this is related to this PR #945

@Lexachoc Lexachoc mentioned this issue Aug 9, 2024
Open
@angelofan
Copy link

The same error will appear in the console when using sidebar and input together.

image

@zoltanszogyenyi Oh, I see you closed this issue. I will open a new issue and describe it in detail.

@angelofan angelofan mentioned this issue Aug 12, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix dropdown focus aria issue Lexachoc/flowbite
2 participants
@angelofan @Lexachoc