4
0
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:
Federico Joel Orlandau 2021-09-07 21:14:28 +02:00 committed by GitHub
parent a94f049f0a
commit 61d075daf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 12 deletions

View File

@ -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 && (

View File

@ -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;

View File

@ -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,
},

View File

@ -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 {

View File

@ -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>