[bug]: Sidebar on mobile requires a DialogTitle

[acomanescu]

Describe the bug

When I open the sidebar on mobile I get this error:

hook.js:608 `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.

If you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.

Affected component/components

Sidebar

How to reproduce

Add a sidebar, implement a trigger, emulate a mobile device and open the sidebar. The console log should display this error.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

MacOS, Chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[erikwibowo]

This is work for me just change the sidebar.tsx component

if (isMobile) {
      return (
          <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
              <SheetTitle className="hidden">
              </SheetTitle> //add this
              <SheetContent
                  data-sidebar="sidebar"
                  data-mobile="true"
                  aria-describedby="" //and this
                  className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
                  style={
                      {
                          "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
                      } as React.CSSProperties
                  }
                  side={side}
              >
                  <div className="flex h-full w-full flex-col">{children}</div>
              </SheetContent>
          </Sheet>
      );
    }

[amaryassa]

In addition to @erikwibowo's suggestion, we could also add <SheetDescription className="hidden"></SheetDescription> to suppress the warning

"Warning: Missing Description or aria-describedby={undefined} for {DialogContent}. Error Component Stack.."

   if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetTitle className="hidden"></SheetTitle> {/*👈🏻 */}
          <SheetDescription className="hidden"></SheetDescription> {/*👈🏻 */}

          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      );