Add homepage content switcher for mobile screens

[obulat]

Fixes

Fixes #709 by @obulat

Description

This PR adds the content type switcher buttons to the homepage that are used on mobile screen. They are hidden on larger screen using tailwind utilities.
@panchovm , I don't know what the hover styles should be for the buttons.

Testing Instructions

Run the app, open the homepage on a narrow screen, and try changing the content types, and searching for different content types.

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[fcoveram]

It looks great ✨ I just noticed the following:

1. Margin-right of content icon is 8px, it should be 4px.
2. Padding-right of content button is 8px, it should be 12px to look balanced.
3. Hover should look like Active state. Sorry for not adding it to Design Libary, I will do it now.

[fcoveram]

Two comments:

I am not seeing the hover style. When pointer is over the button, this does not change its style.

The Active Focus style needs to add a 1px white border inside. I added the component into the Design Library.

[obulat]

@panchovm , could it be that you still have the old code that did not have hover interactions?

Here is a gif of mouse interactions:

And here is a gif of keyboard interactions:

I am not sure when the Active Focus should be applied. Is it when I hover on a button that is selected (black)?

[fcoveram]

I just checked and I am seeing the last commit. The button does not change when pointer goes over it, just when I clicked on it gets the dark background. Here is my pointer passing over the buttons without click.

And the Active Focus style is when you place the focus over a selected element by keyboard navigation focus. The gif you attached is correct.

[zackkrida]

@panchovm could you try git pull one more time and see if anything changes? I am also seeing the correct hover state.

[zackkrida]

Looks nice and is better than having no content switcher, so LGTM!

I do wonder from an a11y perspective if this needs to simulate or use a radio group, since we have multiple buttons that change a single value. We can look into that in a subsequent PR.

[fcoveram]

I ran the pull and it shows Already up to date, then ran the dev and I am still seeing the same. If it works correctly then skip my observation.

[zackkrida]

@panchovm that's useful information, we'll wait for others to test and see if we can replicate the behavior you're seeing. Just because it works for Olga and I doesn't mean it's working. Could always be a browser or system issue.

A reminder as well, the primary use case for this component is mobile, where hover states are not present.

[obulat]

I do wonder from an a11y perspective if this needs to simulate or use a radio group, since we have multiple buttons that change a single value. We can look into that in a subsequent PR.

Definitely agree, sorry for missing this a11y point. Issue created: WordPress/openverse#627

[sarayourfriend]

LGTM! The hover styles work fine for me... I wonder what's going on with @panchovm's local 🤔 It worked in Safari, Chrome and Firefox for me.

Agreed on this with @panchovm.