Misc accessibility improvements + mobile drawer fix (#7912)

AudiusProject · Mar 22, 2024 · 0c8911a · 0c8911a
1 parent d62d210
commit 0c8911a
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 29 deletions.
diff --git a/packages/web/src/components/animated-button/AnimatedButtonProvider.tsx b/packages/web/src/components/animated-button/AnimatedButtonProvider.tsx
@@ -51,7 +51,9 @@ const AnimatedButton = ({
   disabledClassName = '',
   wrapperClassName = '',
   stopPropagation = false,
-  disableAnimationOnMount = true
+  disableAnimationOnMount = true,
+  uniqueKey,
+  ...buttonProps
 }: AnimatedButtonProps) => {
   const [isPaused, setIsPaused] = useState(true)
   const [getDidMount, setDidMount] = useInstanceVar(false)
@@ -122,7 +124,7 @@ const AnimatedButton = ({
   }
 
   return href ? (
-    <SeoLink to={href} {...rootProps}>
+    <SeoLink to={href} {...rootProps} {...buttonProps}>
       {buttonElement}
     </SeoLink>
   ) : (

diff --git a/packages/web/src/components/bottom-bar/BottomBar.tsx b/packages/web/src/components/bottom-bar/BottomBar.tsx
@@ -74,20 +74,23 @@ const BottomBar = ({
         onClick={onClick(onClickFeed, FEED_PAGE)}
         href={FEED_PAGE}
         isMatrixMode={isMatrixMode}
+        aria-label='Feed Page'
       />
       <TrendingButton
         isActive={tempCurrentPage === TRENDING_PAGE}
         darkMode={isDarkMode}
         onClick={onClick(onClickTrending, TRENDING_PAGE)}
         href={TRENDING_PAGE}
         isMatrixMode={isMatrixMode}
+        aria-label='Trending Page'
       />
       <ExploreButton
         isActive={tempCurrentPage === EXPLORE_PAGE}
         darkMode={isDarkMode}
         onClick={onClick(onClickExplore, EXPLORE_PAGE)}
         href={EXPLORE_PAGE}
         isMatrixMode={isMatrixMode}
+        aria-label='Explore Page'
       />
       <LibraryButton
         isActive={
@@ -97,13 +100,15 @@ const BottomBar = ({
         onClick={onClick(onClickLibrary, LIBRARY_PAGE)}
         href={LIBRARY_PAGE}
         isMatrixMode={isMatrixMode}
+        aria-label='Library Page'
       />
       <ProfileButton
         isActive={tempCurrentPage === userProfilePageRoute}
         darkMode={isDarkMode}
         onClick={onClick(onClickProfile, userProfilePageRoute)}
         href={userProfilePageRoute || undefined}
         isMatrixMode={isMatrixMode}
+        aria-label='Profile Page'
       />
     </div>
   )

diff --git a/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx b/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx
@@ -8,7 +8,8 @@ const ExploreButton = ({
   onClick,
   href,
   isActive,
-  isMatrixMode
+  isMatrixMode,
+  ...buttonProps
 }: ButtonProps) => {
   return (
     <AnimatedBottomButton
@@ -24,6 +25,7 @@ const ExploreButton = ({
       iconDarkJSON={() =>
         import('../../../assets/animations/iconExploreDark.json')
       }
+      {...buttonProps}
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx b/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx
@@ -8,7 +8,8 @@ const FeedButton = ({
   onClick,
   href,
   isActive,
-  isMatrixMode
+  isMatrixMode,
+  ...buttonProps
 }: ButtonProps) => {
   return (
     <AnimatedBottomButton
@@ -24,6 +25,7 @@ const FeedButton = ({
       iconDarkJSON={() =>
         import('../../../assets/animations/iconFeedDark.json')
       }
+      {...buttonProps}
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx b/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx
@@ -8,7 +8,8 @@ const LibraryButton = ({
   onClick,
   href,
   isActive,
-  isMatrixMode
+  isMatrixMode,
+  ...buttonProps
 }: ButtonProps) => {
   return (
     <AnimatedBottomButton
@@ -24,6 +25,7 @@ const LibraryButton = ({
       iconDarkJSON={() =>
         import('../../../assets/animations/iconFavoriteDark.json')
       }
+      {...buttonProps}
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx b/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx
@@ -8,7 +8,8 @@ const ProfileButton = ({
   onClick,
   href,
   isActive,
-  isMatrixMode
+  isMatrixMode,
+  ...buttonProps
 }: ButtonProps) => {
   return (
     <AnimatedBottomButton
@@ -18,12 +19,14 @@ const ProfileButton = ({
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
+      aria-label='Profile Page'
       iconLightJSON={() =>
         import('../../../assets/animations/iconProfileLight.json')
       }
       iconDarkJSON={() =>
         import('../../../assets/animations/iconProfileDark.json')
       }
+      {...buttonProps}
     />
   )
 }

diff --git a/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx b/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx
@@ -8,7 +8,8 @@ const TrendingButton = ({
   onClick,
   href,
   isActive,
-  isMatrixMode
+  isMatrixMode,
+  ...buttonProps
 }: ButtonProps) => {
   return (
     <AnimatedBottomButton
@@ -24,6 +25,7 @@ const TrendingButton = ({
       iconDarkJSON={() =>
         import('../../../assets/animations/iconTrendingDark.json')
       }
+      {...buttonProps}
     />
   )
 }

diff --git a/packages/web/src/components/drawer/Drawer.tsx b/packages/web/src/components/drawer/Drawer.tsx
@@ -1,18 +1,12 @@
-import {
-  useEffect,
-  useCallback,
-  useRef,
-  ReactNode,
-  useState,
-  RefObject
-} from 'react'
+import { useEffect, useCallback, useRef, ReactNode, useState } from 'react'
 
 import { useInstanceVar } from '@audius/common/hooks'
 import { IconClose } from '@audius/harmony'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 import cn from 'classnames'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { useSpring, animated, useTransition } from 'react-spring'
+import { useMeasure } from 'react-use'
 import { useDrag } from 'react-use-gesture'
 
 import { usePortal } from 'hooks/usePortal'
@@ -65,12 +59,6 @@ export type DrawerProps = {
   'aria-labelledby'?: string
 }
 
-const getHeight = (contentRef: RefObject<HTMLDivElement>) => {
-  if (!contentRef.current) return 0
-
-  return contentRef.current.getBoundingClientRect().height
-}
-
 const DraggableDrawer = ({
   isOpen,
   children,
@@ -81,18 +69,18 @@ const DraggableDrawer = ({
 }: DrawerProps) => {
   const Portal = usePortal({})
 
-  const contentRef = useRef<HTMLDivElement>(null)
-
   // Stores the initial translation of the drawer
   const [initialTranslation] = useInstanceVar(0)
   // Stores the last transition
   const [currentTranslation, setCurrentTranslation] = useInstanceVar(0)
   // isBackgroundVisible will be true until the close animation finishes
   const [isBackgroundVisible, setIsBackgroundVisible] = useState(false)
 
+  const [contentRef, { height: contentHeight }] = useMeasure<HTMLDivElement>()
+
   const [drawerSlideProps, setDrawerSlideProps] = useSpring(() => ({
     to: {
-      y: -1 * getHeight(contentRef)
+      y: -1 * contentHeight
     },
     config: wobble,
     onFrame(frame: any) {
@@ -118,7 +106,7 @@ const DraggableDrawer = ({
     setIsBackgroundVisible(true)
     setDrawerSlideProps({
       to: {
-        y: -1 * getHeight(contentRef)
+        y: -1 * contentHeight
       },
       immediate: false,
       config: wobble,
@@ -140,9 +128,9 @@ const DraggableDrawer = ({
     })
   }, [
     setDrawerSlideProps,
+    contentHeight,
     setContentFadeProps,
-    setBackgroundOpacityProps,
-    setIsBackgroundVisible
+    setBackgroundOpacityProps
   ])
 
   const close = useCallback(() => {
@@ -199,7 +187,7 @@ const DraggableDrawer = ({
       movement: [, my],
       memo = currentTranslation()
     }) => {
-      const height = getHeight(contentRef)
+      const height = contentHeight
 
       let newY = memo + my
 

diff --git a/packages/web/src/components/nav/desktop/NavHeader.tsx b/packages/web/src/components/nav/desktop/NavHeader.tsx
@@ -91,6 +91,8 @@ export const NavHeader = () => {
               [styles.active]: notificationCount > 0,
               [styles.notificationsOpen]: notificationPanelIsOpen
             })}
+            role='button'
+            aria-label='Open notifications menu'
           >
             <IconNotification />
           </div>

diff --git a/packages/web/src/components/nav/desktop/NavPopupMenu.tsx b/packages/web/src/components/nav/desktop/NavPopupMenu.tsx
@@ -154,6 +154,8 @@ const NavPopupMenu = () => {
                 className={styles.icon}
                 ref={anchorRef}
                 onClick={() => triggerPopup()}
+                role='button'
+                aria-label='Open settings menu'
               >
                 <IconKebabHorizontal size='s' />
               </div>
@@ -167,6 +169,7 @@ const NavPopupMenu = () => {
           )
         }}
         zIndex={zIndex.NAVIGATOR_POPUP}
+        aria-label='Open settings menu'
       />
     </div>
   )

diff --git a/packages/web/src/pages/sign-in-page/SignInPage.tsx b/packages/web/src/pages/sign-in-page/SignInPage.tsx
@@ -141,7 +141,12 @@ export const SignInPage = () => {
             </Flex>
           </Flex>
           {!isMobile ? (
-            <Button variant='secondary' asChild fullWidth>
+            <Button
+              variant='secondary'
+              asChild
+              fullWidth
+              style={{ flexShrink: 0 }}
+            >
               <Link to={SIGN_UP_PAGE}>{signInPageMessages.createAccount}</Link>
             </Button>
           ) : null}