Orr/focus style (#112)

* feat: focus

* focus visible changes

* update jest tests

* fix: small adjustments

* fix: update stuff

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

src/components/AttentionBox/__tests__/__snapshots__/attentionBox.jest.js.snap

@@ -10,6 +10,7 @@ exports[`AttentionBox Tests Snapshot Tests renders correctly 1`] = `
   >
     <svg
       aria-hidden={true}
+      aria-label="attention"
       className="icon_component monday-style-attention-box-component__title-container__icon monday-style-attention-box-component--type-primary__title-container__icon icon_component--no-focus-style"
       fill="currentColor"
       height="24"
@@ -50,6 +51,7 @@ exports[`AttentionBox Tests Snapshot Tests renders correctly with empty props 1`
   >
     <svg
       aria-hidden={true}
+      aria-label="attention"
       className="icon_component monday-style-attention-box-component__title-container__icon monday-style-attention-box-component--type-primary__title-container__icon icon_component--no-focus-style"
       fill="currentColor"
       height="24"

src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.scss

@@ -14,7 +14,7 @@
 
   .breadcrumb-text {
     color: inherit;
-    margin: 0px 4px;
+    margin: 0 4px;
     line-height: 22px;
 
     overflow: hidden;

src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.scss

@@ -3,7 +3,6 @@
   overflow: hidden;
   list-style-type: none;
   cursor: default;
-
   &.clickable {
     cursor: pointer;
   }

src/components/Button/Button.jsx

@@ -202,6 +202,20 @@ const Button = forwardRef(
       ariaHasPopup
     ]);
 
+    const leftIconSize = useMemo(() => {
+      if (typeof leftIcon !== "function") return;
+      if (size === SIZES.SMALL) return "20";
+      if (size === SIZES.MEDIUM) return "24";
+      return "24";
+    }, [leftIcon, size]);
+
+    const rightIconSize = useMemo(() => {
+      if (typeof rightIcon !== "function") return;
+      if (size === SIZES.SMALL) return "20";
+      if (size === SIZES.MEDIUM) return "24";
+      return "24";
+    }, [rightIcon, size]);
+
     if (loading) {
       return (
         <button {...buttonProps}>
@@ -238,6 +252,7 @@ const Button = forwardRef(
             iconType={Icon.type.ICON_FONT}
             clickable={false}
             icon={leftIcon}
+            iconSize={leftIconSize}
             className={cx({ "monday-style-button--left-icon": !!children })}
             ignoreFocusStyle
           />
@@ -248,6 +263,7 @@ const Button = forwardRef(
             iconType={Icon.type.ICON_FONT}
             clickable={false}
             icon={rightIcon}
+            iconSize={rightIconSize}
             className={cx({ "monday-style-button--right-icon": !!children })}
             ignoreFocusStyle
           />

src/components/Button/Button.scss

@@ -1,6 +1,7 @@
 @import "../../styles/global-css-settings.scss";
 @import "../../styles/typography.scss";
 @import "../../styles/themes.scss";
+@import "../../styles/states.scss";
 
 .monday-style-button {
   --loader-padding: 8px;
@@ -266,4 +267,6 @@
     padding-right: 0;
     padding-left: 0;
   }
+
+  @include focus-style();
 }

src/components/ButtonGroup/ButtonGroup.scss

@@ -2,7 +2,6 @@
 @import "../../styles/themes.scss";
 @import "../../styles/typography.scss";
 
-$focus_color: rgba(#0071d9, 0.4); // --color-dark_blue with opacity 0.4
 
 .monday-style-button-group-component {
   display: flex;
@@ -44,12 +43,6 @@ $focus_color: rgba(#0071d9, 0.4); // --color-dark_blue with opacity 0.4
           }
         }
       }
-
-      // For keyboard tab navigation
-      &:focus-visible {
-        box-shadow: 0 0 0px 2px $focus_color;
-        z-index: 11; // above others
-      }
     }
   }
   &__option-text {

src/components/Checkbox/Checkbox.scss

@@ -1,6 +1,7 @@
 @import "../../styles/global-css-settings";
 @import "../../styles/themes.scss";
 @import "../../styles/typography.scss";
+@import "../../styles/states.scss";
 
 $checkbox-size: 16px;
 
@@ -91,6 +92,15 @@ $checkbox-size: 16px;
         @include hover-selected;
       }
     }
+    &:focus-visible {
+      & + .monday-style-checkbox__checkbox {
+        outline: none;
+        border: 1px solid;
+        @include theme-prop(border-color, primary-color);
+        box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);
+        border-radius: 2px;
+      }
+    }
 
     &:checked {
       &:focus + .monday-style-checkbox__checkbox:after {

src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap

@@ -21,6 +21,7 @@ exports[`Checkbox Tests Snapshot Tests renders correctly 1`] = `
   >
     <svg
       aria-hidden={false}
+      aria-label="checkbox"
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
       height="16"
@@ -67,6 +68,7 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when checked 1`] = `
   >
     <svg
       aria-hidden={false}
+      aria-label="checkbox"
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
       height="16"
@@ -113,6 +115,7 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
   >
     <svg
       aria-hidden={false}
+      aria-label="checkbox"
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
       height="16"
@@ -159,6 +162,7 @@ exports[`Checkbox Tests Snapshot Tests renders correctly with empty props 1`] =
   >
     <svg
       aria-hidden={false}
+      aria-label="checkbox"
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
       height="16"

src/components/Dropdown/__tests__/__snapshots__/dropdown.jest.js.snap

@@ -69,6 +69,7 @@ exports[`Dropdown should open menu on click if set 1`] = `
         >
           <svg
             aria-hidden="false"
+            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"
@@ -208,6 +209,7 @@ exports[`Dropdown should open menu on focus if set 1`] = `
         >
           <svg
             aria-hidden="false"
+            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"
@@ -371,6 +373,7 @@ exports[`Dropdown should render correctly for the different sizes 1`] = `
       >
         <svg
           aria-hidden={false}
+          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="20px"
@@ -484,6 +487,7 @@ exports[`Dropdown should render correctly for the different sizes 2`] = `
       >
         <svg
           aria-hidden={false}
+          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="20px"
@@ -597,6 +601,7 @@ exports[`Dropdown should render correctly for the different sizes 3`] = `
       >
         <svg
           aria-hidden={false}
+          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="16px"
@@ -710,6 +715,7 @@ exports[`Dropdown should render correctly with empty props 1`] = `
       >
         <svg
           aria-hidden={false}
+          aria-label=""
           className="icon_component icon_component--clickable"
           fill="currentColor"
           height="20px"
@@ -813,6 +819,7 @@ exports[`Dropdown should use async if set 1`] = `
         >
           <svg
             aria-hidden="false"
+            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"
@@ -902,6 +909,7 @@ exports[`Dropdown should use virtualization if set 1`] = `
         >
           <svg
             aria-hidden="false"
+            aria-label=""
             class="icon_component icon_component--clickable"
             fill="currentColor"
             height="20px"

src/components/EditableHeading/EditableHeading.scss

@@ -1,16 +1,16 @@
 @import "../../styles/themes.scss";
 @import "../../styles/typography.scss";
+@import "../../styles/states.scss";
 
 .editable-heading--wrapper {
   width: 100%;
   min-width: 0;
   border: 1px solid transparent;
+  border-radius: $border-radius-small;
+  @include focus-style();
   &:focus,
   &:active {
     outline: none;
-    border: 1px solid;
-    border-radius: $border-radius-small;
-    @include theme-prop(border-color, primary-color);
   }
   .heading-component {
     margin: 0;
@@ -35,7 +35,6 @@
     &.heading-element-type-h3 {
       @include font-subtitle();
     }
-
     &.heading-element-type-h4,
     &.heading-element-type-h5 {
       @include font-default();

src/components/EditableInput/EditableInput.jsx

@@ -215,7 +215,7 @@ const EditableInput = forwardRef(
 EditableInput.propTypes = {
   className: PropTypes.string,
   placeholder: PropTypes.string,
-  inputType: PropTypes.oneOf("input", "textarea"),
+  inputType: PropTypes.oneOf(["input", "textarea"]),
   autoSize: PropTypes.bool,
   autoComplete: PropTypes.bool,
   maxLength: PropTypes.number,

src/components/EditableInput/EditableInput.scss

@@ -13,6 +13,7 @@
   border: 1px solid;
   border-radius: $border-radius-small;
   @include theme-prop(border-color, primary-color);
+  vertical-align: top;
   text-align: left;
   vertical-align: top;
   &.no-resize {

src/components/EditableInput/__tests__/__snapshots__/editableInput.jest.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly aria label 1`] = `
+exports[`renders correctly with aria label 1`] = `
 <input
   ariaLabel="Edit input"
   autoComplete="on"

src/components/ExpandCollapse/ExpandCollapse.jsx

@@ -7,7 +7,7 @@ import Icon from "../Icon/Icon";
 import DropdownChevronDown from "../Icon/Icons/components/DropdownChevronDown";
 
 const ExpandCollapse = forwardRef(
-  ({ children, headerComponentRenderer, className, defaultOpenState, iconSize }, ref) => {
+  ({ children, headerComponentRenderer, className, defaultOpenState, iconSize, id }, ref) => {
     const componentRef = useRef(null);
     const mergedRef = useMergeRefs({ refs: [ref, componentRef] });
 
@@ -18,11 +18,15 @@ const ExpandCollapse = forwardRef(
     };
 
     return (
-      <div ref={mergedRef} className={cx("expand-collapse--wrapper", className)}>
+      <div ref={mergedRef} className={cx("expand-collapse--wrapper", className)} id={id}>
         <div className="expand-collapse">
-          <div
-            className={`expand-collapse__header expand-collapse__section ${isOpen && "expand-collapse__header--open"}`}
+          <button
+            className={cx("expand-collapse__header", "expand-collapse__section", {
+              "expand-collapse__header--open": isOpen
+            })}
             onClickCapture={toogleExpand}
+            aria-expanded={isOpen}
+            aria-controls={`${id}-controls`}
           >
             {headerComponentRenderer && headerComponentRenderer()}
             <Icon
@@ -33,11 +37,13 @@ const ExpandCollapse = forwardRef(
               tabindex="-1"
               clickable={false}
             />
-          </div>
+          </button>
           {isOpen && (
             <div
               className={`expand-collapse__content expand-collapse__section ${isOpen &&
                 "animate-expand-collapse__content"}`}
+              id={`${id}-controls`}
+              role="region"
             >
               {children}
             </div>
@@ -49,6 +55,10 @@ const ExpandCollapse = forwardRef(
 );
 
 ExpandCollapse.propTypes = {
+  /**
+   * Id for the component
+   */
+  id: PropTypes.string,
   /**
    * Component as parameter to be rendered as header
    */
@@ -71,6 +81,7 @@ ExpandCollapse.propTypes = {
   defaultOpenState: PropTypes.bool
 };
 ExpandCollapse.defaultProps = {
+  id: "",
   className: "",
   defaultOpenState: false,
   iconSize: 24