From 344c0fcc67e9e5b6c8272108a72aa7f2171e28c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor=20Congio=20Goularte?=
 <joaocongio@outlook.com>
Date: Tue, 9 Jan 2024 15:17:53 -0300
Subject: [PATCH] =?UTF-8?q?feat(acessibility):=20added=20aria=20properties?=
 =?UTF-8?q?=20to=20resolve=20accessibility=20is=E2=80=A6=20(#73)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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       | 5 +++--
 messages/en.json            | 5 +++--
 messages/pt.json            | 5 +++--
 react/Drawer.tsx            | 2 +-
 react/DrawerCloseButton.tsx | 5 +++++
 react/Swipable.tsx          | 2 +-
 6 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/messages/context.json b/messages/context.json
index 348f81f..3b1babd 100644
--- a/messages/context.json
+++ b/messages/context.json
@@ -1,3 +1,4 @@
 {
-  "admin/editor.drawer.title": "Drawer"
-}
\ No newline at end of file
+  "admin/editor.drawer.title": "Drawer",
+  "store/drawer.close-button": "drawer.close-button"
+}
diff --git a/messages/en.json b/messages/en.json
index 348f81f..891347f 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1,3 +1,4 @@
 {
-  "admin/editor.drawer.title": "Drawer"
-}
\ No newline at end of file
+  "admin/editor.drawer.title": "Drawer",
+  "store/drawer.close-button": "Close"
+}
diff --git a/messages/pt.json b/messages/pt.json
index 348f81f..faa2091 100644
--- a/messages/pt.json
+++ b/messages/pt.json
@@ -1,3 +1,4 @@
 {
-  "admin/editor.drawer.title": "Drawer"
-}
\ No newline at end of file
+  "admin/editor.drawer.title": "Drawer",
+  "store/drawer.close-button": "Fechar"
+}
diff --git a/react/Drawer.tsx b/react/Drawer.tsx
index fc3423b..2d0bc28 100644
--- a/react/Drawer.tsx
+++ b/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 ? (
diff --git a/react/DrawerCloseButton.tsx b/react/DrawerCloseButton.tsx
index 07c3442..5167430 100644
--- a/react/DrawerCloseButton.tsx
+++ b/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} />}
diff --git a/react/Swipable.tsx b/react/Swipable.tsx
index 3c35ccf..02a2683 100644
--- a/react/Swipable.tsx
+++ b/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>
     )
   }