feat(acessibility): added aria properties to resolve accessibility is… (

#73)

#### What problem is this solving?

Drawer ajuste apontado pelo Lighthouse: "Os elementos
[aria-hidden="true"] contêm descendentes focalizáveis"
Alterado a lógica para valor do atributo aria-hidden, pois quando o
minicart não está aberto, o botão deve ter o atributo
aria-hidden="false" e não "true". E quando o minicart estiver aberto,
esses valores devem se inverter, ou seja, o botão receber o atributo
aria-hidden="true", já que agora o minicart é exibido e o botão não.

DrawerCloseButton foi adicionado aria-label e id para facilitar a
identificação aos leitores de tela.

Swipable foi removido o atributo aria-hidden, pois também estava
impactando na acessibilidade apontada pelo LightHouse: "Os elementos
[aria-hidden="true"] contêm descendentes focalizáveis".

#### How to test it?

[Workspace](https://www.samsclub.com.br/?workspace=testeacessibilidade)

Executar o teste no Lighthouse ou PageSpeed.

#### Screenshots or example usage:

Antes da alteração:
![minicart
before](https://github.com/vtex-apps/drawer/assets/22462037/392c1fe5-1628-47d2-b8b8-45545da0039e)

Depois da alteração (o ajuste não foi mais apontado pelo Lighthouse):
![Minicart
After](https://github.com/vtex-apps/drawer/assets/22462037/d6075511-9f88-4242-a064-4d52bec3780f)

Antes da alteração:
![Swipable
Antes](https://github.com/vtex-apps/drawer/assets/22462037/d6d7f6aa-20c0-4f1d-b7d7-72e7d6c57fc0)

Depois da alteração (o ajuste não foi mais apontado pelo Lighthouse):
![Swipable
Depois](https://github.com/vtex-apps/drawer/assets/22462037/d293b4e4-85fa-4b90-a26e-0ce83f05dd39)

---------

Co-authored-by: joao.congio <joao.congio@corebiz.ag>

messages/context.json

@@ -1,3 +1,4 @@
 {
-  "admin/editor.drawer.title": "Drawer"
-}
+  "admin/editor.drawer.title": "Drawer",
+  "store/drawer.close-button": "drawer.close-button"
+}

messages/en.json

@@ -1,3 +1,4 @@
 {
-  "admin/editor.drawer.title": "Drawer"
-}
+  "admin/editor.drawer.title": "Drawer",
+  "store/drawer.close-button": "Close"
+}

messages/pt.json

@@ -1,3 +1,4 @@
 {
-  "admin/editor.drawer.title": "Drawer"
-}
+  "admin/editor.drawer.title": "Drawer",
+  "store/drawer.close-button": "Fechar"
+}

react/Drawer.tsx

@@ -184,7 +184,7 @@ function Drawer(props: Props) {
       <div
         onClick={openMenu}
         role="presentation"
-        aria-hidden={isMenuOpen ? 'false' : 'true'}
+        aria-hidden={!isMenuOpen ? 'false' : 'true'}
         className={`pa4 pointer ${handles.openIconContainer}`}
       >
         {hasTriggerBlock ? (

react/DrawerCloseButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useCssHandles } from 'vtex.css-handles'
 import { IconClose } from 'vtex.store-icons'
+import { useIntl } from 'react-intl'
 
 import { useDrawer } from './DrawerContext'
 
@@ -18,12 +19,16 @@ const DrawerCloseButton: React.FC<Props> = ({
   text,
 }) => {
   const { close } = useDrawer()
+  const intl = useIntl()
 
   const handles = useCssHandles(CSS_HANDLES)
 
   return (
     <button
       className={`${handles.closeIconButton} pa4 pointer bg-transparent transparent bn pointer`}
+      aria-label={intl.formatMessage({
+        id: 'store/drawer.close-button',
+      })}
       onClick={close}
     >
       {text ?? <IconClose size={size} type={type} />}

react/Swipable.tsx

@@ -465,7 +465,7 @@ export default class Swipable extends React.Component<Props> {
         }}
         className={this.props.className}
       >
-        {this.props.children}
+        {this.props.enabled && this.props.children}
       </div>
     )
   }