feat(web): Improve accessibility and styles for event form when editing with keyboard (#1088)

* feature(web): Added :hover and :focus effects to - StyledTitle, PrioritySection, DateControlSection, RecurrenceSection in EventForm

* feature(web): Added :hover and :focus effects to: RecurrenceSection, StyledDescription

* feature(web): Added :focus and :hover effects to EventForm components

* feature(web): Added scrollbar styling for StyledDescription

* feature(web): removed unnecessary underlineColor prop, replaced hardcoded colors with theme colors, changed scroll cursor to default

* refactor(core): remove hslToSpaceFormat function from color utilities

This was adding maintenance burden and wasn't adding any value, as the DatePicker is currenly falling back to the `grayGradient` from `getGradient()` anyway. Better approach would be to refactor that function so that it renders a different gradient based on the priority as expected.

---------

Co-authored-by: Patrik Hrabcak <[email protected]>
Co-authored-by: Tyler Dane <[email protected]>

Author: 3 people

packages/web/src/components/ContextMenu/styled.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { darken } from "@core/util/color.utils";
 
 export const PriorityContainer = styled.div`
   display: flex;
@@ -46,7 +47,19 @@ export const PriorityCircle = styled.div<{ color: string; selected: boolean }>`
   background-color: ${({ selected, color }) =>
     selected ? color : "transparent"};
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
+  transition: ${({ theme }) => theme.transition.default};
+
+  &:hover {
+    ${({ selected, theme }) =>
+      selected
+        ? `filter: brightness(85%);`
+        : `background-color: ${theme.color.border.primary};`}
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
+  }
 `;
 
 export const MenuItem = styled.li`

packages/web/src/components/DatePicker/DatePicker.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { isDark } from "@core/util/color.utils";
+import { darken, isDark } from "@core/util/color.utils";
 import dayjs from "@core/util/date/dayjs";
 import { theme } from "@web/common/styles/theme";
 import {
@@ -16,6 +16,7 @@ import { Flex } from "@web/components/Flex";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
 import { StyledInput } from "@web/components/Input/styled";
 import { Text } from "@web/components/Text";
+import { Focusable } from "../Focusable/Focusable";
 
 export interface Props extends ReactDatePickerProps {
   animationOnToggle?: boolean;
@@ -80,7 +81,14 @@ export const DatePicker: React.FC<Props> = ({
           view={view}
         />
       )}
-      customInput={<StyledInput bgColor={inputColor} />}
+      customInput={
+        <Focusable
+          Component={StyledInput}
+          underlineColor={darken(bgColor, -15)}
+          bgColor={inputColor}
+          withUnderline
+        />
+      }
       dateFormat={"M-d-yyyy"}
       formatWeekDay={(day) => day[0]}
       open={isOpen}

packages/web/src/components/IconButton/styled.ts

@@ -28,15 +28,14 @@ export const StyledIconButton = styled.button<IconButtonProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  transition:
-    background-color 0.3s ease,
-    transform 0.2s ease,
-    border-color 0.2s ease;
+  border-radius: ${({ theme }) => theme.shape.borderRadius};
+  transition: ${({ theme }) => theme.transition.default};
   font-size: ${({ size = "medium" }) => sizeMap[size]}px;
   border: 2px solid transparent;
 
   &:hover {
     transform: scale(1.05);
+    background-color: ${({ theme }) => theme.color.border.primary};
   }
 
   &:active {
@@ -49,6 +48,6 @@ export const StyledIconButton = styled.button<IconButtonProps>`
   }
 
   &:focus-visible {
-    border-color: ${({ theme }) => theme.color.border.primary};
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
   }
 `;

packages/web/src/components/Input/styled.ts

@@ -8,15 +8,17 @@ export const StyledInput = styled.input<Props>`
   background-color: ${({ bgColor }) => bgColor};
   border: none;
   height: 34px;
+  padding: 0 8px;
   font-size: ${({ theme }) => theme.text.size.l};
   outline: none;
   width: 100%;
+  transition: ${({ theme }) => theme.transition.default};
 
   ::placeholder {
     color: ${({ theme }) => theme.color.text.darkPlaceholder};
   }
 
   &:hover {
-    filter: brightness(87%);
+    background-color: ${({ theme }) => theme.color.border.primary};
   }
 `;

packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/TimePicker/TimePicker.tsx

@@ -3,7 +3,7 @@ import ReactSelect, { Props as RSProps } from "react-select";
 import { Key } from "ts-key-enum";
 import { SelectOption } from "@web/common/types/component.types";
 import { Option_Time } from "@web/common/types/util.types";
-import { StyledDivider, StyledTimePicker } from "./styled";
+import { StyledTimePicker } from "./styled";
 
 export interface Props extends Omit<RSProps, "onChange" | "value"> {
   bgColor: string;
@@ -78,7 +78,6 @@ export const TimePicker = ({
         options={options}
         tabSelectsValue={false}
       />
-      {isMenuOpen && <StyledDivider width="calc(100% - 16px)" />}
     </StyledTimePicker>
   );
 };

packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/TimePicker/styled.ts

@@ -28,11 +28,15 @@ export const StyledTimePicker = styled.div<Props>`
     &__control {
       border: none;
       ${({ bgColor }) => bgColor && `background: ${bgColor}`};
+      border-radius: ${({ theme }) => theme.shape.borderRadius};
       box-shadow: none;
-      border-radius: 0;
-      min-height: 100%;
+      min-height: 38px;
+      transition: ${({ theme }) => theme.transition.default};
       &:hover {
-        filter: brightness(87%);
+        filter: brightness(90%);
+      }
+      &--is-focused {
+        box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
       }
     }
     &__value-container {

packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/styled.ts

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import { Flex } from "@web/components/Flex";
 
-export const StyledDateTimeFlex = styled(Flex)``;
+export const StyledDateTimeFlex = styled(Flex)`
+  gap: ${({ theme }) => theme.spacing.s};
+`;
 
 export const StyledTimeFlex = styled(Flex)``;

packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/FreqSelect.tsx

@@ -42,13 +42,24 @@ export const FreqSelect = ({
       theme={(selectTheme) => ({
         ...selectTheme,
         borderRadius: 4,
+        primary: theme.color.border.primaryDark, // focus border color
+        primary25: darken(bgColor), // hover color
+        primary50: brighten(bgColor), // selected color
       })}
       styles={{
-        control: (baseStyles) => ({
+        control: (baseStyles, state) => ({
           ...baseStyles,
           backgroundColor: bgColor,
           borderRadius: theme.shape.borderRadius,
+          border: "none",
+          transition: theme.transition.default,
           fontSize,
+          "&:hover": {
+            filter: `brightness(95%)`,
+          },
+          boxShadow: state.isFocused
+            ? `0 0 0 2px ${theme.color.border.primaryDark}`
+            : "none",
         }),
         indicatorSeparator: () => ({
           visibility: "hidden",

packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/styled.ts

@@ -29,26 +29,31 @@ export const StyledRepeatText = styled.span<{
   padding: 2px 8px;
   color: ${({ hasRepeat, theme }) =>
     hasRepeat ? theme.color.text.dark : theme.color.text.darkPlaceholder};
+  transition: ${({ theme }) => theme.transition.default};
 
   svg {
     color: inherit;
+    margin-right: ${({ theme }) => theme.spacing.xs};
   }
 
-  &:focus,
   &:hover {
     cursor: pointer;
     color: ${({ theme }) => theme.color.text.dark};
-    filter: brightness(110%);
+    background-color: ${({ theme }) => theme.color.border.primary};
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
   }
 `;
 
 export const StyledRepeatTextContainer = styled(Flex)`
   align-items: center;
   border-radius: ${({ theme }) => theme.shape.borderRadius};
-  gap: 6px;
+  gap: ${({ theme }) => theme.spacing.xs};
+  border: 1px solid transparent;
   justify-content: center;
   margin-right: 8px;
-  padding: 2px 0;
+  padding: 2px 8px;
   color: ${({ theme }) => theme.color.text.darkPlaceholder};
   font-size: ${({ theme }) => theme.text.size.m};
   cursor: pointer;
@@ -62,10 +67,13 @@ export const StyledRepeatTextContainer = styled(Flex)`
     transition: inherit;
   }
 
-  &:focus,
   &:hover {
     color: ${({ theme }) => theme.color.text.dark};
-    filter: brightness(110%);
+    background-color: ${({ theme }) => theme.color.border.primary};
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
   }
 `;
 
@@ -76,8 +84,10 @@ export const StyledWeekDay = styled.button<{
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  border: 1px solid ${({ theme }) => theme.color.bg.primary};
+  border: 1px solid ${({ theme }) => theme.color.border.primaryDark};
   background-color: ${({ bgColor }) => bgColor};
+  transition: ${({ theme }) => theme.transition.default};
+
   cursor: pointer;
   ${({ selected, theme }) =>
     !selected &&
@@ -94,17 +104,24 @@ export const StyledWeekDay = styled.button<{
     background-color: ${darken(bgColor, 30)};
     color: ${theme.getContrastText(bgColor)};
   `}
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
+  }
 `;
 
 export const StyledIntervalInput = styled.input<{
   bgColor: string;
 }>`
-  width: 32;
-  height: 24px;
-  border: 1px solid ${({ theme }) => theme.color.bg.primary};
+  width: 32px;
+  height: 38px;
+  border: 1px solid transparent;
+  text-align: center;
+  border-radius: ${({ theme }) => theme.shape.borderRadius};
   padding: 0 4px;
   background-color: ${({ bgColor }) => bgColor};
   margin-left: ${({ theme }) => theme.spacing.xs};
+  transition: ${({ theme }) => theme.transition.default};
 
   /* Hide arrows/spinners */
   &::-webkit-outer-spin-button,
@@ -117,6 +134,14 @@ export const StyledIntervalInput = styled.input<{
   &[type="number"] {
     -moz-appearance: textfield;
   }
+
+  &:hover {
+    filter: brightness(90%);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
+  }
 `;
 
 export const StyledCaretInputContainer = styled.div`
@@ -130,17 +155,23 @@ export const StyledCaretButton = styled.button`
   background: none;
   color: inherit;
   border: none;
+  border-radius: ${({ theme }) => theme.shape.borderRadius};
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
-  height: 16px;
-  width: 16px;
+  height: 19px;
+  width: 19px;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: ${({ theme }) => theme.transition.default};
+
   &:hover {
     background-color: ${({ theme }) => theme.color.bg.primary};
     color: ${({ theme }) => theme.color.text.light};
   }
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.primaryDark};
+  }
 `;

packages/web/src/views/Forms/EventForm/EventForm.tsx

@@ -12,6 +12,7 @@ import { Priorities } from "@core/constants/core.constants";
 import { darken } from "@core/util/color.utils";
 import dayjs from "@core/util/date/dayjs";
 import { ID_EVENT_FORM } from "@web/common/constants/web.constants";
+import { theme } from "@web/common/styles/theme";
 import {
   colorByPriority,
   hoverColorByPriority,