feat: Initial implemantation acessibility

.codeclimate.yml

@@ -24,3 +24,6 @@ checks:
   return-statements:
     config:
       threshold: 4
+
+exclude_paths:
+  - "src/plugins"

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>
         ))}

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
 };

src/components/MoveControl.js

@@ -11,6 +11,26 @@ import MegadraftBlock from "./MegadraftBlock";
 
 import { BLOCK_SWAP_UP, BLOCK_SWAP_DOWN } from "../constants";
 
+const ButtonOption = ({ dataTestId, className, onClick, arialLabel }) => {
+  const onPointerDown = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return (
+    <button
+      data-testid={dataTestId}
+      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">
-      <div
-        data-testid={`swap-up-${id}`}
+      <ButtonOption
+        dataTestId={`swap-up-${id}`}
+        arialLabel="Button action move up block content of text editor"
         className={
           disableUp
             ? "options__button options__button--up options__button--disabled"
@@ -36,12 +53,11 @@ const Options = ({
           onAction({ type: BLOCK_SWAP_UP, blockId: id });
           onClickUp();
         }}
-        onPointerDown={onPointerDown}
-      >
-        <icons.DropdownArrow />
-      </div>
-      <div
-        data-testid={`swap-down-${id}`}
+        buttonIcon={<icons.DropdownArrow />}
+      />
+      <ButtonOption
+        dataTestId={`swap-down-${id}`}
+        arialLabel="Button action move down block content of text editor"
         className={
           disableDown
             ? "options__button options__button--disabled"
@@ -51,10 +67,7 @@ const Options = ({
           onAction({ type: BLOCK_SWAP_DOWN, blockId: id });
           onClickDown();
         }}
-        onPointerDown={onPointerDown}
-      >
-        <icons.DropdownArrow />
-      </div>
+      />
     </div>
   );
 };

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>

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>
   );
 }

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>
   );

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>
   );

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;
   }

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;

src/styles/sidebar.scss

@@ -38,6 +38,12 @@
         background: none;
         outline: none;
 
+        &:focus {
+          &:before {
+            background-color: $gray-300;
+          }
+        }
+
         &:before {
             content: "";
             width: 100%;

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();
   });

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();