Replace second line for filters with UI from segments variant D #5022
Conversation
apata
changed the title
apata
changed the title
apata
force-pushed
the
saved-segments/singular-bar
branch
from
a0317c6 to
07e1127
Compare
|
apata
changed the base branch from
saved-segments/expand-segments-query-from
to
master
apata
force-pushed
the
saved-segments/singular-bar
branch
from
07e1127 to
85878b7
Compare
| ref={seeMoreRef} | ||
| dropdownContainerProps={{ | ||
| ['title']: opened ? 'Show less' : 'Show more', | ||
| ['aria-controls']: 'more-filters-menu', |
There was a problem hiding this comment.
We already have headlessui as a dependency. Consider using the dropdown menu component over a hand-rolled dropdown to get things like aria properties for free.
There was a problem hiding this comment.
Agreed with the principle overall. Alas, headlessui doesn't align with accessibility standards (tab navigation between items) and that's why I refactored datepicker out of it last year. I wanted to keep new UI aligned with datepicker, thus I kept this custom component.
Maybe we want to align with the storybook dropdown instead?
There was a problem hiding this comment.
headlessui doesn't align with accessibility standards (tab navigation between items)
What standard specifically? AFAIK accessible menus should be navigable via arrows and items should have tabindex="-1" which headlessUI does https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role
There was a problem hiding this comment.
You're right, MDN is clear on that! My gut feel had solidified to a standard since the last time we talked about this: #4461 (comment)
Still, the question remains which components to refactor and when. There's a few on the dashboard, but also https://plausible.io/storybook/dropdown is on tab navigation.
There was a problem hiding this comment.
This turned out to be a bit more involved than I hoped, but I think I managed to get some good results. I've prepped an additional PR against this branch:
#5037
|
Problem: when a filter is added the page jumps vertically by a little bit, but enough to be annoying: Cap.2025-01-28.at.12.17.07.mp4 |
apata
force-pushed
the
saved-segments/singular-bar
branch
from
5cc073b to
f3332cf
Compare
|
Approved assuming #5037 gets merged |
…es (#5037) * Try popover * Pass targetRef instead of target, stop Escape clearing filters * Stop Escape clearing filters when popover menus active * Attempt get rid of hand-rolled dropdown * Fix issue with comparison calendar * Almost works * Unify styles * Focus modals on mount * Refactor date picker logic * Replace navigate keybinds with straightforward keybinds * Remove extraneous Calendar component, better props * Attempt optimise menu re-renders * Memoise QueryPeriodsMenu, refactor getDatePeriodGroups * Refactor ComparisonMenu to Popover * Refactor QueryPeriodMenu to Popover * Pull calendar out of components * Refactor calendar to receive position from JS * Simpler calendar API * Add click outside listener for Calendar, fix FiltersBar measurements * Give back top bar room * Update tests * Apply unified button text style * Close calendar on keyboard nav to othe menus as well * Kinda works * Works even better * Working well * Sometimes menu stays active * WIP * Adapter * Works with error * Fixed the error * Remove handrolled isOpen * Introduce shared adapter * Share adapter
apata
force-pushed
the
saved-segments/singular-bar
branch
from
ba6f837 to
b7257e4
Compare
Changes
Tests
Changelog
Documentation
Dark mode
Visuals