forked from crowetic/commerce
Improve a11y on the cart and sidebar (#411)
* Improve a11y on the cart * Fix button style * Remove extra space * Move cart item count to the right position Co-authored-by: Luis Alvarez D <luis@vercel.com>
This commit is contained in:
parent
a94f049f0a
commit
61d075daf1
@ -7,6 +7,7 @@ import useCustomer from '@framework/customer/use-customer'
|
||||
import { Avatar } from '@components/common'
|
||||
import { Heart, Bag } from '@components/icons'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import Button from '@components/ui/Button'
|
||||
import DropdownMenu from './DropdownMenu'
|
||||
import s from './UserNav.module.css'
|
||||
|
||||
@ -26,9 +27,11 @@ const UserNav: FC<Props> = ({ className }) => {
|
||||
<nav className={cn(s.root, className)}>
|
||||
<ul className={s.list}>
|
||||
{process.env.COMMERCE_CART_ENABLED && (
|
||||
<li className={s.item} onClick={toggleSidebar}>
|
||||
<Bag />
|
||||
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||
<li className={s.item}>
|
||||
<Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
|
||||
<Bag />
|
||||
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||
</Button>
|
||||
</li>
|
||||
)}
|
||||
{process.env.COMMERCE_WISHLIST_ENABLED && (
|
||||
|
@ -35,6 +35,15 @@
|
||||
@apply border-accent-9 bg-accent-9 text-accent-0;
|
||||
}
|
||||
|
||||
.naked {
|
||||
@apply bg-transparent font-semibold border-none shadow-none outline-none py-0 px-0;
|
||||
}
|
||||
|
||||
.naked:hover,
|
||||
.naked:focus {
|
||||
@apply bg-transparent border-none;
|
||||
}
|
||||
|
||||
.disabled,
|
||||
.disabled:hover {
|
||||
@apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;
|
||||
|
@ -12,7 +12,7 @@ import { LoadingDots } from '@components/ui'
|
||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
href?: string
|
||||
className?: string
|
||||
variant?: 'flat' | 'slim' | 'ghost'
|
||||
variant?: 'flat' | 'slim' | 'ghost' | 'naked'
|
||||
active?: boolean
|
||||
type?: 'submit' | 'reset' | 'button'
|
||||
Component?: string | JSXElementConstructor<any>
|
||||
@ -41,6 +41,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||
{
|
||||
[s.ghost]: variant === 'ghost',
|
||||
[s.slim]: variant === 'slim',
|
||||
[s.naked]: variant === 'naked',
|
||||
[s.loading]: loading,
|
||||
[s.disabled]: disabled,
|
||||
},
|
||||
|
@ -1,5 +1,5 @@
|
||||
.root {
|
||||
@apply fixed inset-0 h-full z-50 box-border;
|
||||
@apply fixed inset-0 h-full z-50 box-border outline-none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
@ -13,28 +13,44 @@ interface SidebarProps {
|
||||
}
|
||||
|
||||
const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
|
||||
const ref = useRef() as React.MutableRefObject<HTMLDivElement>
|
||||
const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
|
||||
const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>
|
||||
|
||||
const onKeyDownSidebar = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.code === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const sidebar = ref.current
|
||||
if (sidebarRef.current) {
|
||||
sidebarRef.current.focus()
|
||||
}
|
||||
|
||||
if (sidebar) {
|
||||
disableBodyScroll(sidebar, { reserveScrollBarGap: true })
|
||||
const contentElement = contentRef.current
|
||||
|
||||
if (contentElement) {
|
||||
disableBodyScroll(contentElement, { reserveScrollBarGap: true })
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (sidebar) enableBodyScroll(sidebar)
|
||||
if (contentElement) enableBodyScroll(contentElement)
|
||||
clearAllBodyScrollLocks()
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={cn(s.root)}>
|
||||
<div
|
||||
className={cn(s.root)}
|
||||
ref={sidebarRef}
|
||||
onKeyDown={onKeyDownSidebar}
|
||||
tabIndex={1}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className={s.backdrop} onClick={onClose} />
|
||||
<section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
|
||||
<div className="h-full w-full md:w-screen md:max-w-md">
|
||||
<div className={s.sidebar} ref={ref}>
|
||||
<div className={s.sidebar} ref={contentRef}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user