Skip to content

fix(frontend): correct four small UI defects - #132

Merged
pdevito3 merged 5 commits into
mainfrom
fix/ui-small-defects-2
Oct 25, 2026
Merged

pdevito3 merged 5 commits into
mainfrom
fix/ui-small-defects-2

Conversation

@pdevito3

Copy link
Copy Markdown
Owner

Why

Earlier agents listed six small frontend defects. Four reproduce on main in a real browser, and this PR fixes them. Two do not reproduce, because #126 already fixed them.

What changed

  • Home and About use a div, not a second main inside the layout main. The About title now holds an h1. The page looks the same.
  • The boolean filter edit dialog marks the current value. That button gets the filled style and aria-pressed="true". In the Add Filter menu, which has no current value, the buttons stay plain buttons.
  • On a phone, the close button of the bottom sheet (ResponsiveDialog) is 32 px, as the other buttons of the sheet are. On a desktop it stays 28 px, as in Dialog and Sheet.

Scope

  • Not fixed, because they do not reproduce: the "Is Blocked" label is already visually hidden in the dialog, and the button size row on /components already has items-center.
  • The toast files and the date calendar do not change.

Blast Radius

The close button change applies to each ResponsiveDialog below the md breakpoint. These are the filter dialogs and the demo dialog on /components. The boolean control changes only when it gets initialFilter, which only the edit dialog sends.

Verification

  • The first commit adds five functional tests. All five fail on main: two pages with 2 main landmarks, no About h1, no pressed button in the edit dialog, and a 28x28 close button. With the fixes they pass 10 of 10 times. Two more tests guard the add menu buttons and the 28 px desktop close button.
  • pnpm lint, pnpm build, pnpm test (80 passed), and pnpm test:e2e --workers=4 (47 passed) pass.
  • The About page screenshot is pixel-identical before and after.

ARIA tree of /about:

before:  - main:            after:  - main:
           ...                        ...
           - main:                    - heading "About" [level=1]

Edit Is Blocked Filter, after a True filter

Before After
before after

Bottom sheet close button on a 390 px phone, hovered

Before (28 px) After (32 px)
before after

…t an h1

The layout already renders SidebarInset as the main landmark. Home and About put a second main inside it, so a screen reader listed two nested main landmarks. They now use a div.

The About title was a div, so the page had no h1. The title now holds an h1 with the same look.
The Edit Is Blocked Filter dialog showed True and False as two equal outline buttons, so the user could not see which value the filter had. The control now reads initialFilter. The current value gets the filled button style and aria-pressed=true. The Add Filter menu has no current value and does not change.
On a phone, ResponsiveDialog is a bottom sheet. Its close button used the icon-sm size, 28 px, while the other buttons of the sheet are 32 px high. Below the md breakpoint the close button is now 32 px. On a desktop it stays 28 px, as the close buttons of Dialog and Sheet are.
@pdevito3

Copy link
Copy Markdown
Owner Author

Independent review: two passes, no high or medium findings. Two low findings stay open.

  • The editFilter locator puts the label into a RegExp and does not escape it. A label with ( would break it. It copies the removeFilter locator, and only "Is Blocked" uses it now.
  • Two specs call boundingBox() directly. Other specs read geometry through a task or a support helper. No rule forbids this, and a helper for one value adds a layer.

Fixed after review: the Add Filter menu buttons no longer carry aria-pressed="false", a test keeps the desktop close button at 28 px, and the edit test checks aria-pressed="false" on the other value.

…oolean filter

The edit dialog marked the stored value as current and ignored the
operator. A Not Equals filter matches the opposite value, so the dialog
now marks that one.
@pdevito3
pdevito3 merged commit 9082e16 into main Oct 25, 2026
16 checks passed
@pdevito3
pdevito3 deleted the fix/ui-small-defects-2 branch October 25, 2026 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant