Issue #1060 - Improve accessibility and styles for event form when editing with keyboard #1088

PatrikH-01 · 2025-10-08T21:50:08Z

Changes

Added :hover and :focus effects to elements in EventForm that didn't have them. I also improved styling of IntervallInput and TimePicker components a little bit.

Before, after comparison:

Here is a video of how the form looks after styling changes:
https://github.com/user-attachments/assets/bb5adb19-5ed3-4408-bbd8-005ec9f88114

Related Issue

Fixes #1060

…itySection, DateControlSection, RecurrenceSection in EventForm

…StyledDescription

Copilot

Pull Request Overview

This PR improves keyboard accessibility and visual feedback for the EventForm by adding comprehensive :focus and :hover effects to form components. The changes enhance the user experience when navigating with keyboard controls.

Added consistent :focus and :hover styling across all form components including buttons, inputs, and selects
Improved visual consistency by standardizing transition effects and focus indicators
Enhanced accessibility by providing clear visual feedback for keyboard navigation

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/web/src/views/Forms/EventForm/styled.ts	Added transitions and hover effects to title and description inputs
packages/web/src/views/Forms/EventForm/EventForm.tsx	Passed underlineColor prop to date controls and recurrence sections
packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/styled.ts	Enhanced styling for recurrence controls with focus states and improved layout
packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/FreqSelect.tsx	Improved React Select styling with proper focus and hover states
packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/EndsOnDate.tsx	Added underlineColor prop support for consistent theming
packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/RecurrenceSection.tsx	Passed underlineColor prop to child components
packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/TimePicker/styled.ts	Enhanced TimePicker with better focus states and removed unnecessary divider
packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/TimePicker/TimePicker.tsx	Removed unused StyledDivider import and element
packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/DateTimeSection.tsx	Added underlineColor prop support
packages/web/src/views/Forms/EventForm/DateControlsSection/DateTimeSection/DatePickers/DatePickers.tsx	Passed underlineColor to DatePicker components
packages/web/src/views/Forms/EventForm/DateControlsSection/DateControlsSection/styled.ts	Changed gap from theme spacing to fixed 10px value
packages/web/src/views/Forms/EventForm/DateControlsSection/DateControlsSection/DateControlsSection.tsx	Added underlineColor prop threading
packages/web/src/components/Input/styled.ts	Enhanced base input component with improved hover effects and transitions
packages/web/src/components/IconButton/styled.ts	Standardized focus states and transitions for icon buttons
packages/web/src/components/DatePicker/DatePicker.tsx	Integrated Focusable component for better focus management
packages/web/src/components/ContextMenu/styled.ts	Added hover and focus states to priority circle elements

Copilot · 2025-10-09T03:49:32Z

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

  display: flex;
  flex-wrap: wrap;
-  gap: ${({ theme }) => theme.spacing.s};
+  gap: 10px;


Consider using theme spacing instead of hardcoded values to maintain consistency with the design system. Replace 10px with ${({ theme }) => theme.spacing.s} or an appropriate theme spacing value.

Suggested change

gap: 10px;

gap: ${({ theme }) => theme.spacing.s};

tyler-dane · 2025-10-09T03:55:39Z

Thanks for the PR, @PatrikH-01!

Looking pretty good at first glance.

But I noticed that the scrollbar styles in the description field are off. The scrollbar-thumb and scrollbar background should use the priority color.

Here is how it should look:

scrollbar.mov

PatrikH-01 · 2025-10-09T23:22:58Z

Thanks for the PR, @PatrikH-01!

Looking pretty good at first glance.

But I noticed that the scrollbar styles in the description field are off. The scrollbar-thumb and scrollbar background should use the priority color.

Here is how it should look:

scrollbar.mov

Okay so i looked into it and applied styling to description scrollbar so now it should look good at all browsers.
Here is how it looks after changes:

tyler-dane · 2025-10-10T04:44:41Z

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

+  transition: ${({ theme }) => theme.transition.default};
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);


Please don't add hardcoded colors. Instead, use the theme.

Including them seems innocent enough here, but avoiding this will make our lives much easier once we get to #1094

tyler-dane · 2025-10-10T04:52:38Z

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

          setIsEndDatePickerOpen={setIsEndDatePickerOpen}
          setIsStartDatePickerOpen={setIsStartDatePickerOpen}
+          underlineColor={underlineColor}
        />


Adding another prop to this already massive component and drilling it a lot with underlineColor is making me wary.

Also...I'm not sure what it's actually doing. I set it to "red" and don't see any changes in the UI.

Maybe I'm missing something, but in general I feel like we can make things simpler

tyler-dane · 2025-10-10T04:56:29Z

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

+      scrollbar-width: thin;
+      scrollbar-color: ${({ theme }) => theme.color.border.primaryDark}
+        transparent;
+    }


Another source of wariness here.

Since the scrollbar styles are working fine in main, the fact that we need to do so much on this branch to preserve that same styling makes me think this is more of a bandaid that is covering up some other styling issue, rather than code that we should keep around

Thanks for pointing this out. That’s interesting, on my environment (Windows + Chrome), the scrollbar doesn’t look correct even on main branch, which is why I added the extra CSS. Could you let me know what OS/browser you’re using where it already looks correct?

If it’s just an environment difference, maybe we can add a cross-browser compatible style (scrollbar-color for Firefox, ::-webkit-scrollbar for Chromium browsers) as i already did ant that should ensure consistent looks everywhere.

Oh interesting. I'm on Mac + Chrome.

If main isn't working on windows then I agree, let's go with your working version.

tyler-dane

Thanks for taking the suggestions and making improvements.

I only mentioned it once, but there are a handful of cases of using hard-coded colors.

UX is feeling good, but needs some clean up in order to make it easier to maintain. Happy to give this another look once those are squared away.

tyler-dane · 2025-10-10T16:31:57Z

Small bug:

When hovering over the scrollbar thumb, the cursor should be default, which is how it works on main. On this branch it's text

cursor-bug.mov

…oded colors with theme colors, changed scroll cursor to default

PatrikH-01 · 2025-10-11T00:19:42Z

So I addressed all your comments:

Replaced hard-coded colors with theme colors.
Fixed a bug where the scrollbar showed a text cursor.
Removed the unnecessary underlineColor prop and instead used bgColor along with the darken() function to set the correct color for the input underline.

To make this work, I had to convert the bgColor format from "hsl(h, s%, l%)" to "hsl(h s l)" so it would be compatible with the underlineColor prop that the Focusable component uses to render the underline. For this reason, I created a new helper function called hslToSpaceFormat in @core/util/color.utils.

tyler-dane · 2025-10-11T00:48:59Z

Thanks @PatrikH-01. Can you just update your branch now? There are some conflicts to resolve

PatrikH-01 · 2025-10-11T15:07:27Z

Hi @tyler-dane,

I’ve merged main into fix-1060, so there should be no conflicts now.
Please review and approve the requested changes if everything looks good.

Patrik Hrabcak added 3 commits October 8, 2025 23:07

feature(web): Added :hover and :focus effects to - StyledTitle, Prior…

b1c6cb7

…itySection, DateControlSection, RecurrenceSection in EventForm

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

64e53da

…StyledDescription

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

bfb4004

tyler-dane requested a review from Copilot October 9, 2025 03:49

Copilot AI reviewed Oct 9, 2025

View reviewed changes

feature(web): Added scrollbar styling for StyledDescription

6f7e7c5

tyler-dane reviewed Oct 10, 2025

View reviewed changes

tyler-dane requested changes Oct 10, 2025

View reviewed changes

feature(web): removed unnecessary underlineColor prop, replaced hardc…

55c6826

…oded colors with theme colors, changed scroll cursor to default

Merge branch 'main' into fix-1060

6c778b2

PatrikH-01 requested a review from tyler-dane October 11, 2025 14:46

Issue #1060 - Improve accessibility and styles for event form when editing with keyboard #1088

Are you sure you want to change the base?

Issue #1060 - Improve accessibility and styles for event form when editing with keyboard #1088

Uh oh!

Conversation

PatrikH-01 commented Oct 8, 2025

Changes

Related Issue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

tyler-dane commented Oct 9, 2025

Uh oh!

PatrikH-01 commented Oct 9, 2025

Uh oh!

tyler-dane Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

tyler-dane Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

tyler-dane Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

PatrikH-01 Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

tyler-dane Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

tyler-dane left a comment

Choose a reason for hiding this comment

Uh oh!

tyler-dane commented Oct 10, 2025

Uh oh!

PatrikH-01 commented Oct 11, 2025

Uh oh!

tyler-dane commented Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PatrikH-01 commented Oct 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tyler-dane commented Oct 11, 2025 •

edited

Loading