Refactor home search #21

Merged

ro merged 6 commits from moiety/search into develop

2025-05-05 22:44:21 +02:00

Moiety commented

2025-05-02 12:43:44 +02:00

Collaborator

some things i changed:

the input field and the button are now vertically aligned
the search icon uses the current font color for its fill
the focus indicator is distinct while (i think) fitting in the design
the search button has an accessible name

things i haven't changed (yet)

the search field uses placeholder for the label, this is generally not a good way to make stuff accessible but i'll expand on that in an issue
the search field doesn't really have an affordance that it's a search field (outside of the text)
at smaller sizes the placeholder text gets chopped off on the right

some things i changed: - the input field and the button are now vertically aligned - the search icon uses the current font color for its fill - the focus indicator is distinct while (i think) fitting in the design - the search button has an accessible name things i haven't changed (yet) - the search field uses `placeholder` for the label, this is generally not a good way to make stuff accessible but i'll expand on that in an issue - the search field doesn't really have an affordance that it's a search field (outside of the text) - at smaller sizes the placeholder text gets chopped off on the right

Moiety added the

UI/UX

accessibility

labels 2025-05-02 12:43:44 +02:00

Moiety added 1 commit 2025-05-02 12:43:44 +02:00

style: apply editorconfig 335df5ff5e

Moiety added 1 commit 2025-05-02 17:03:59 +02:00

feat: add accessible form element focus indicator 8b6d86df5f

adds a focus indicator that passes the accessibility requirements WCAG 2.2: §1.4.11 & §2.4.7

Moiety added 1 commit 2025-05-02 17:24:07 +02:00

feat: replace search icon with an SVG 85ad3d9225

this change allows us to use the font colour for the icon. it might also be nice to use a sprite.svg for all icons. this would use the same <use> mechanism as i did here.

this also optimises the SVG a bit

Moiety added 1 commit 2025-05-02 17:33:20 +02:00

fix: set accessible name for search button 934a6612f4

also changes the CSS for the text transform

Moiety added 2 commits 2025-05-02 17:50:02 +02:00

fix: only transition form control colors eaeb507337

the blanket statement `all` causes some weird animations when resizing the page. setting this to only transition specific properties fixes this.

refactor: rework the search form with CSS Grid acfd553f19

ro commented

2025-05-05 16:04:42 +02:00

Collaborator

Overall, I think these are fine, but I want the focus indicator on the search to be loud. That's the reason for the color flip. If it needs more contrast, I'll work on that, but I don't want subtle for that component.