Skip to content

Commit

Permalink
fix(core): add missing accessibility components to quick search
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgemoya committed Aug 1, 2024
1 parent c831677 commit 2470710
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/quick-trees-cry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": patch
---

Add missing accisibility components to Quick Search.
6 changes: 5 additions & 1 deletion core/components/quick-search/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,16 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
<SheetPrimitive.Overlay className="fixed inset-0 bg-transparent backdrop-blur-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
<SheetPrimitive.Portal>
<SheetPrimitive.Content
aria-describedby={undefined}
className={cn(
'fixed inset-x-0 top-0 items-center overflow-auto border-b bg-white px-4 shadow-lg transition ease-in-out data-[state=closed]:duration-0 data-[state=open]:duration-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top md:px-10 lg:px-12',
searchResults && searchResults.products.length > 0 && 'h-full lg:h-3/4',
)}
>
<h2 className="sr-only">Search bar</h2>
<SheetPrimitive.Title asChild>
<h2 className="sr-only">Search bar</h2>
</SheetPrimitive.Title>

<div className="grid h-[92px] w-full grid-cols-5 items-center">
<div className="me-2 hidden lg:block lg:justify-self-start">{children}</div>
<Form
Expand Down

0 comments on commit 2470710

Please sign in to comment.