feat(web,a11y): replace IconButton with CircleIconButton

[ben-basten]

Description

Migrate all usages of IconButton to CircleIconButton, or other similar alternatives.

In my opinion, CircleIconButton is preferred because its colors are consistent with other buttons throughout the application, implementation is simpler, and accessible labeling is built-in by default.

New in this PR:

• The magnifying glass "Search" button in the main search bar now shows an outline when hovered, to make it more obvious that it's clickable.
• The ellipses menu when hovering over a person or album now has a white background, for visibility.
• Added a screen reader only label to the main search box.
• Added a button type prop to CircleIconButton, to make it more flexible for usage in any scenario. This was a required change to get the search bar buttons working as expected.

Expand for screenshots

Light theme toggle

Dark theme toggle

Album options ellipses

Hover over search button

How Has This Been Tested?

Checked the buttons in light mode, light mode hovered, dark mode, and dark mode hovered.

There are also different icons in the top navigation in narrow mobile views, so the same testing needs to be done there too.

Checklist:

• npm run lint
• npm run format
• npm run check:svelte
• npm test

[ben-basten]

FYI @Ethan13310, this will affect your new implementation of the responsive top navigation in #8776. For example, the mdiMenu hamburger button in the top navigation will need to be moved over to a CircleIconButton. Open to your thoughts on this too!

[danieldietzler]

Nice!

[waclaw66]

Could you please revert showing three dots button background while hovering albums and faces, it's really disruptive. In the addition it doesn't follow current theme, it's always shown in light theme.

before:

20240502_081944.mp4

PR:

20240502_081847.mp4

[ben-basten]

Hey @waclaw66, thanks for the feedback!

The more prominent background on the icon was intentional, to give the button guaranteed color contrast in photos where the upper portion is brighter, such as an overexposed sky. To demonstrate, here's what the icon looks like on a white background:

Before the PR (light mode):

After the PR (light mode):

I do see what you mean about it being jarring having a light icon in dark mode. What would you think about leaving the more prominent background, but making it responsive to light mode vs dark mode?

[waclaw66]

The main (subjective) problem I have with this PR is that the three dot button background is shown immediately after album/face is hovered. When you hover mouse across multiple albums that moving big three dot button is like crosshair and distorts the impression of elegance. I would preffer to not show the three dot button background immediately when album/face is hovered, but when the button itself is hovered, like it was before and also Google Photos does it. The three dot button background color is just minor thing, it can stay as it is now always in light theme. Thanks for consideration my proposal.

[waclaw66]

@ben-basten The only change you need to do is to change color="opaque" attribute on CircleIconButton element within album and people card to work as below. Thanks.

2024-05-04.08.52.44.mp4

[ben-basten]

@waclaw66 I have another icon-related PR in the works, and I can add it there once I get some time to test it out.