From d85f25b7a98641bed8166780b17abc01ad94b364 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Wed, 5 Oct 2022 19:18:45 -0300
Subject: [PATCH 1/6] improvement with aria and buttons context actions

---
 src/components/Dropdown.js           | 14 +++++++++++++-
 src/components/DropdownItem.js       |  7 +++++--
 src/components/MoveControl.js        | 14 ++++++++++----
 src/components/Sidebar.js            |  5 +++++
 src/components/plugin/BlockAction.js | 12 ++++++++++--
 src/plugins/image/ImageButton.js     |  9 ++++++++-
 src/plugins/video/VideoButton.js     |  9 ++++++++-
 7 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
index 346276b4..6f2605d7 100644
--- a/src/components/Dropdown.js
+++ b/src/components/Dropdown.js
@@ -59,17 +59,29 @@ const Dropdown = ({ items = [], selected, onChange }) => {
         item={selectedItem}
         className="dropdown__item--selected"
         onMouseDown={preventSelection}
+        attr={{
+          role: "button",
+          "aria-label": `Dropdown option ${selectedItem.label} selected`
+        }}
       >
         <icons.DropdownArrow className={arrowClassName} />
       </DropdownItem>
 
-      <ul className={dropdownClassName}>
+      <ul
+        className={dropdownClassName}
+        role="dropdown"
+        aria-label={`Dropdown content ${isOpen ? "open" : ""}`}
+      >
         {items.map(item => (
           <li key={item.key}>
             <DropdownItem
               item={item}
               className="dropdown__option"
               onClick={() => onChange(item.key)}
+              attr={{
+                role: "button",
+                "aria-label": `Dropdown option ${item.label}`
+              }}
             />
           </li>
         ))}
diff --git a/src/components/DropdownItem.js b/src/components/DropdownItem.js
index d0b2756a..9f3abdda 100644
--- a/src/components/DropdownItem.js
+++ b/src/components/DropdownItem.js
@@ -13,22 +13,25 @@ export default function DropdownItem(props) {
   const className = classNames("dropdown__item ", props.className);
 
   return (
-    <div
+    <button
       className={className}
       onClick={props.onClick}
       onMouseDown={props.onMouseDown}
       onMouseUp={props.onMouseDown}
+      {...props.attr}
+      type="button"
     >
       <Icon className="dropdown__item__icon" />
       <span className="dropdown__item__text">{props.item.label}</span>
 
       {props.children}
-    </div>
+    </button>
   );
 }
 
 DropdownItem.propTypes = {
   item: PropTypes.object.isRequired,
+  attr: PropTypes.object,
   style: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   onClick: PropTypes.func
 };
diff --git a/src/components/MoveControl.js b/src/components/MoveControl.js
index d2512fb3..4b8b26e5 100644
--- a/src/components/MoveControl.js
+++ b/src/components/MoveControl.js
@@ -25,7 +25,7 @@ const Options = ({
   };
   return (
     <div className="options">
-      <div
+      <button
         data-testid={`swap-up-${id}`}
         className={
           disableUp
@@ -37,10 +37,13 @@ const Options = ({
           onClickUp();
         }}
         onPointerDown={onPointerDown}
+        type="button"
+        role="button"
+        aria-label="Button action move up block content of text editor"
       >
         <icons.DropdownArrow />
-      </div>
-      <div
+      </button>
+      <button
         data-testid={`swap-down-${id}`}
         className={
           disableDown
@@ -52,9 +55,12 @@ const Options = ({
           onClickDown();
         }}
         onPointerDown={onPointerDown}
+        type="button"
+        role="button"
+        aria-label="Button action move down block content of text editor"
       >
         <icons.DropdownArrow />
-      </div>
+      </button>
     </div>
   );
 };
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index fb329c17..2c308561 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -156,6 +156,11 @@ export class ToggleButton extends Component {
           this.button.focus();
           this.props.toggle();
         }}
+        role="button"
+        aria-label={`Button for actions text editor ${
+          this.props.open ? "close" : "open"
+        }`}
+        aria-pressed={this.props.open}
       >
         <Icon className="sidemenu__button__icon" />
       </button>
diff --git a/src/components/plugin/BlockAction.js b/src/components/plugin/BlockAction.js
index a4a36c75..e65e5497 100644
--- a/src/components/plugin/BlockAction.js
+++ b/src/components/plugin/BlockAction.js
@@ -11,8 +11,16 @@ export default function BlockAction(props) {
   const Icon = props.item.icon;
 
   return (
-    <li className="block__action" onClick={props.item.action}>
-      <Icon className="block__action__icon" />
+    <li className="block__action">
+      <button
+        className="block__action__btn"
+        type="button"
+        role="button"
+        aria-label={`Button action ${props.item.key} of text editor`}
+        onClick={props.item.action}
+      >
+        <Icon className="block__action__icon" />
+      </button>
     </li>
   );
 }
diff --git a/src/plugins/image/ImageButton.js b/src/plugins/image/ImageButton.js
index 96709b0f..321b5b72 100644
--- a/src/plugins/image/ImageButton.js
+++ b/src/plugins/image/ImageButton.js
@@ -25,7 +25,14 @@ export default function BlockButton(props) {
   }
 
   return (
-    <button className={className} type="button" onClick={onClick} title={title}>
+    <button
+      className={className}
+      type="button"
+      onClick={onClick}
+      title={title}
+      role="button"
+      aria-label="Button action add image in text editor"
+    >
       <icons.ImageIcon className="sidemenu__button__icon" />
     </button>
   );
diff --git a/src/plugins/video/VideoButton.js b/src/plugins/video/VideoButton.js
index 17d5e059..b5e3f4e3 100644
--- a/src/plugins/video/VideoButton.js
+++ b/src/plugins/video/VideoButton.js
@@ -29,7 +29,14 @@ export default function VideoButton(props) {
   }
 
   return (
-    <button className={className} type="button" onClick={onClick} title={title}>
+    <button
+      className={className}
+      type="button"
+      onClick={onClick}
+      title={title}
+      role="button"
+      aria-label="Button action add video in text editor"
+    >
       <icons.VideoIcon className="sidemenu__button__icon" />
     </button>
   );

From cd67f5ed5fe06f38b620cac3ba58871080cc39c7 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Wed, 5 Oct 2022 19:19:05 -0300
Subject: [PATCH 2/6] adjustment style with focus event

---
 src/styles/block.scss    | 18 ++++++++++++++++--
 src/styles/dropdown.scss | 13 +++++++++++++
 src/styles/sidebar.scss  |  6 ++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/styles/block.scss b/src/styles/block.scss
index b90a1718..6cfd02ae 100644
--- a/src/styles/block.scss
+++ b/src/styles/block.scss
@@ -41,17 +41,31 @@
 }
 
 .block__action {
-  display: inline-block;
+  display: inline-flex;
   padding: 0 8px;
+  min-height: 40px;
   line-height: 40px;
-  cursor: pointer;
   text-align: center;
   font-size: 0;
+  align-items: center;
 
   &:hover {
     color: $black;
   }
 
+  &__btn {
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+
+    align-self: stretch;
+    justify-content: stretch;
+
+    &:focus {
+      box-shadow: rgba(0, 0, 0, 0.3) 0 0 4px;
+    }
+  }
+
   &__icon {
     vertical-align: middle;
   }
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index c7550d9f..458bff56 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -50,12 +50,25 @@
 }
 
 .dropdown__item {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+
+  width: 100%;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+
   padding: 0 8px;
   line-height: 40px;
   font-size: 0;
 
   user-select: none;
 
+  &:focus {
+    box-shadow: rgba(0, 0, 0, 0.3) 0 0 4px;
+  }
+
   &--selected {
     &:hover {
       color: $gray-600;
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index c89cd795..28c7dfe3 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -38,6 +38,12 @@
         background: none;
         outline: none;
 
+        &:focus {
+          &:before {
+            background-color: $gray-300;
+          }
+        }
+
         &:before {
             content: "";
             width: 100%;

From 6400f4eb9e376a53a4c2eabffc53e7ec003bdfd4 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Wed, 5 Oct 2022 19:19:25 -0300
Subject: [PATCH 3/6] test(unit): adjustment dropdown and blockAction

---
 tests/components/Dropdown_test.js           | 2 +-
 tests/components/plugin/BlockAction_test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/components/Dropdown_test.js b/tests/components/Dropdown_test.js
index 6020e079..09df5c34 100644
--- a/tests/components/Dropdown_test.js
+++ b/tests/components/Dropdown_test.js
@@ -54,7 +54,7 @@ describe("Dropdown Component", () => {
 
     expect(testContext.onChange).not.toHaveBeenCalled();
 
-    item.find("div").simulate("click");
+    item.find("button").simulate("click");
 
     expect(testContext.onChange).toHaveBeenCalled();
   });
diff --git a/tests/components/plugin/BlockAction_test.js b/tests/components/plugin/BlockAction_test.js
index fe4c2556..e5458589 100644
--- a/tests/components/plugin/BlockAction_test.js
+++ b/tests/components/plugin/BlockAction_test.js
@@ -32,7 +32,7 @@ describe("BlockAction Component", () => {
   });
 
   it("is possible to click on the action item", () => {
-    const itemDOM = testContext.wrapper.find("li");
+    const itemDOM = testContext.wrapper.find("button");
 
     expect(testContext.crop).not.toHaveBeenCalled();
 

From b6e6cf3bc71aaf60374301b1370f5c70395d3c85 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Wed, 5 Oct 2022 20:01:30 -0300
Subject: [PATCH 4/6] add src plugins in exclude codeclimate

---
 .codeclimate.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 7a0b0580..48c6bcfe 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -24,3 +24,6 @@ checks:
   return-statements:
     config:
       threshold: 4
+
+exclude_paths:
+  - "src/plugins"
\ No newline at end of file

From e2f617cb0a8e6ddc51953ffb60064e2a7afbcd6d Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Wed, 5 Oct 2022 20:01:51 -0300
Subject: [PATCH 5/6] refactory button option in MoveControl

---
 src/components/MoveControl.js | 51 ++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/MoveControl.js b/src/components/MoveControl.js
index 4b8b26e5..bc87e08b 100644
--- a/src/components/MoveControl.js
+++ b/src/components/MoveControl.js
@@ -11,6 +11,26 @@ import MegadraftBlock from "./MegadraftBlock";
 
 import { BLOCK_SWAP_UP, BLOCK_SWAP_DOWN } from "../constants";
 
+const ButtonOption = ({ id, className, onClick, arialLabel }) => {
+  const onPointerDown = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return (
+    <button
+      data-testid={`swap-up-${id}`}
+      className={className}
+      onClick={onClick}
+      onPointerDown={onPointerDown}
+      type="button"
+      role="button"
+      aria-label={arialLabel}
+    >
+      <icons.DropdownArrow />
+    </button>
+  );
+};
+
 const Options = ({
   onClickUp,
   onClickDown,
@@ -19,14 +39,11 @@ const Options = ({
   disableDown,
   onAction
 }) => {
-  const onPointerDown = e => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
   return (
     <div className="options">
-      <button
-        data-testid={`swap-up-${id}`}
+      <ButtonOption
+        id={`swap-up-${id}`}
+        arialLabel="Button action move up block content of text editor"
         className={
           disableUp
             ? "options__button options__button--up options__button--disabled"
@@ -36,15 +53,11 @@ const Options = ({
           onAction({ type: BLOCK_SWAP_UP, blockId: id });
           onClickUp();
         }}
-        onPointerDown={onPointerDown}
-        type="button"
-        role="button"
-        aria-label="Button action move up block content of text editor"
-      >
-        <icons.DropdownArrow />
-      </button>
-      <button
-        data-testid={`swap-down-${id}`}
+        buttonIcon={<icons.DropdownArrow />}
+      />
+      <ButtonOption
+        id={`swap-down-${id}`}
+        arialLabel="Button action move down block content of text editor"
         className={
           disableDown
             ? "options__button options__button--disabled"
@@ -54,13 +67,7 @@ const Options = ({
           onAction({ type: BLOCK_SWAP_DOWN, blockId: id });
           onClickDown();
         }}
-        onPointerDown={onPointerDown}
-        type="button"
-        role="button"
-        aria-label="Button action move down block content of text editor"
-      >
-        <icons.DropdownArrow />
-      </button>
+      />
     </div>
   );
 };

From 92fe4781fc22be8fb38a909afde5c15a78e3a90c Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Wed, 5 Oct 2022 20:04:21 -0300
Subject: [PATCH 6/6] adjustment data-testid for test unit

---
 src/components/MoveControl.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MoveControl.js b/src/components/MoveControl.js
index bc87e08b..a34585d9 100644
--- a/src/components/MoveControl.js
+++ b/src/components/MoveControl.js
@@ -11,14 +11,14 @@ import MegadraftBlock from "./MegadraftBlock";
 
 import { BLOCK_SWAP_UP, BLOCK_SWAP_DOWN } from "../constants";
 
-const ButtonOption = ({ id, className, onClick, arialLabel }) => {
+const ButtonOption = ({ dataTestId, className, onClick, arialLabel }) => {
   const onPointerDown = e => {
     e.preventDefault();
     e.stopPropagation();
   };
   return (
     <button
-      data-testid={`swap-up-${id}`}
+      data-testid={dataTestId}
       className={className}
       onClick={onClick}
       onPointerDown={onPointerDown}
@@ -42,7 +42,7 @@ const Options = ({
   return (
     <div className="options">
       <ButtonOption
-        id={`swap-up-${id}`}
+        dataTestId={`swap-up-${id}`}
         arialLabel="Button action move up block content of text editor"
         className={
           disableUp
@@ -56,7 +56,7 @@ const Options = ({
         buttonIcon={<icons.DropdownArrow />}
       />
       <ButtonOption
-        id={`swap-down-${id}`}
+        dataTestId={`swap-down-${id}`}
         arialLabel="Button action move down block content of text editor"
         className={
           disableDown