feature / add the prop tabIndex on componente when aria hiden is true

.eslintrc

@@ -2,8 +2,6 @@
   "extends": "vtex",
   "root": true,
   "env": {
-    "node": true,
-    "es6": true,
-    "jest": true
+    "node": true
   }
 }

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+- Only show `aria` when menu is closed
+
 ## [0.18.1] - 2024-11-14
 
 ### Added

package.json

@@ -16,6 +16,9 @@
       "eslint --fix",
       "prettier --write"
     ],
+    "*.{json,graphql,gql}": [
+      "prettier --write"
+    ],
     "*.json": [
       "prettier --write"
     ]

react/Drawer.tsx

@@ -1,4 +1,4 @@
 import React, {
   Suspense,
   useReducer,
   MouseEventHandler,
@@ -11,8 +11,8 @@
 import { useCssHandles } from 'vtex.css-handles'
 import { useChildBlock, ExtensionPoint } from 'vtex.render-runtime'
 import { usePixelEventCallback } from 'vtex.pixel-manager'
-import { PixelData } from 'vtex.pixel-manager/react/PixelContext'
+import type { PixelEventTypes } from 'vtex.pixel-manager'
 import {
   MaybeResponsiveValue,
   useResponsiveValue,
 } from 'vtex.responsive-values'
@@ -61,8 +61,8 @@
   header?: React.ReactElement
   backdropMode?: MaybeResponsiveValue<BackdropMode>
   renderingStrategy?: RenderingStrategy
-  customPixelEventId?: PixelData['id']
-  customPixelEventName?: PixelData['event']
+  customPixelEventId?: PixelEventTypes.PixelData['id']
+  customPixelEventName?: PixelEventTypes.PixelData['event']
   onVisibilityChanged?: (visible: boolean) => void
   zIndex?: number
 }
@@ -75,12 +75,12 @@
         isOpen: true,
         hasBeenOpened: true,
       }
     case 'close':
       return {
         ...state,
         isOpen: false,
       }
     default:
       return state
   }
 }
@@ -131,7 +131,7 @@
     onVisibilityChanged,
     zIndex = 999,
   } = props
   const handles = useCssHandles(CSS_HANDLES)
   const backdropMode = useResponsiveValue(backdropModeProp)
   const hasTriggerBlock = Boolean(useChildBlock({ id: 'drawer-trigger' }))
   const hasHeaderBlock = Boolean(useChildBlock({ id: 'drawer-header' }))
@@ -140,7 +140,7 @@
   const [shouldRenderChildren, setShouldRenderChildren] = useState(
     renderingStrategy === 'eager'
   )
   const [isMoving, setIsMoving] = useState(false)
 
   // Always add the listener for 'openDrawer' events, since they're sent by
   // the drawer-trigger block.
@@ -204,10 +204,21 @@
   return (
     <DrawerContextProvider value={contextValue}>
       <div
-        onClick={openMenu}
-        role="presentation"
+        role="button"
         aria-hidden={isMenuOpen ? 'false' : 'true'}
-        className={`pa4 pointer ${handles.openIconContainer}`}
+        aria-expanded={isMenuOpen}
+        aria-label={isMenuOpen ? 'close drawer' : 'open drawer'}
+        tabIndex={isMenuOpen ? 0 : -1}
+        onClick={openMenu}
+        onKeyDown={e => {
+          if (
+            isMenuOpen &&
+            (e.key === 'Enter' || e.key === ' ' || e.key === 'Escape')
+          ) {
+            e.preventDefault()
+            openMenu()
+          }
+        }}
       >
         {hasTriggerBlock ? (
           <ExtensionPoint id="drawer-trigger" />
@@ -228,11 +239,9 @@
             onUpdateOffset={value => {
               setIsMoving(!(value === '0%' || value === '-100%'))
             }}
-            className={`${handles.drawer} ${
-              isMenuOpen ? handles.opened : handles.closed
-            } ${isMoving ? handles.moving : ''} ${
-              direction === 'right' ? 'right-0' : 'left-0'
-            } fixed top-0 bottom-0 bg-base z-999 flex flex-column`}
+            className={`${handles.drawer} ${isMenuOpen ? handles.opened : handles.closed
+              } ${isMoving ? handles.moving : ''} ${direction === 'right' ? 'right-0' : 'left-0'
+              } fixed top-0 bottom-0 bg-base z-999 flex flex-column`}
             style={{
               width: width ?? (isFullWidth ? '100%' : '85%'),
               maxWidth,

react/DrawerTrigger.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { usePixel } from 'vtex.pixel-manager'
-import { PixelData } from 'vtex.pixel-manager/react/PixelContext'
+import type { PixelEventTypes } from 'vtex.pixel-manager'
 import { useCssHandles } from 'vtex.css-handles'
 
 interface Props {
@@ -18,7 +18,7 @@
       return
     }
 
-    const pixelEvent: PixelData = {
+    const pixelEvent: PixelEventTypes.PixelData = {
       id: customPixelEventId,
       event: 'openDrawer',
     }

react/package.json

@@ -16,10 +16,10 @@
     "@vtex/test-tools": "^3.0.0",
     "typescript": "3.9.7",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
-    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.4.0/public/@types/vtex.pixel-manager",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.1/public/@types/vtex.render-runtime",
-    "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.3.0/public/_types/react",
+    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.9.0/public/@types/vtex.pixel-manager",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.135.1/public/@types/vtex.render-runtime",
+    "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values",
     "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons"
   },
   "version": "0.18.1"
-}
+}