[Feature] Explore accessibility for category filters

[isabelxklee]

trafficstars

Problem

The current UX for category filters is not the most accessible for a couple reasons:

1. When selected, the category title gets truncated to an abbreviation.
2. To unselect a filter, the user must specifically click on a small "x" next to the category title (the category itself is not clickable).
3. Selecting a filter hides the other options, making elements unnecessarily jump around the page.

Also see "Additional context" section for other, related issues about the category filters functionality.

Current UX:

https://github.com/creativecommons/cc-resource-archive/assets/52360534/618c3850-340a-4ef0-823b-72281889290d

Description

I'm open to different ideas, but I think the best solution would be to use a more common category filter UX.

1. Keep all the filter options visible, regardless of selection status.
2. Use visual contrast to indicate which filters are selected.
3. Make the entire filter be clickable, instead of a small target area.
4. OPTIONAL: use more explicit language, like "remove filter" or "clear filters".

Example that I think works well from Thingtesting:

Alternatives

Open to suggestions!

Additional context

Related to Issue #81 and PR #180.

Implementation

• [x] I would be interested in implementing this feature.

[isabelxklee]

Heyo @possumbilities, I just created this issue! Let me know if you think there's anything else I should add. 👀

[aniketmdinde]

I would like to contribute to this issue. Can you assign it to me?

[isabelxklee]

I would like to contribute to this issue. Can you assign it to me?

Please read the contribution guideline.

Here is also additional context from @TimidRobot:

Instead of asking for issues to be assigned, do the work and submit a pull request (PR). Even if multiple people submit PRs for the same issue, they can all list their own PRs on their application. It is the quality of work that is important, not whether it is merged.

[possumbilities]

I've been thinking on this and here's something I'd like to add to the discussion. The lists of items vertically works because of how small everything is, and despite them being perhaps (and arguably) not the best UX, if we move to the "pill-style" buttons then those often work better horizontally in their flow (even if they line wrap).

That extra visual space might result in very long vertical lists, reducing the usability of the filters.

There may be solutions here, but its going to require thorough consideration before its something that's solid enough to build out.

[isabelxklee]

@possumbilities That's a good point! I'm going to keep researching UX patterns that might be more appropriate for this context. I agree that the vertical lists can easily get too long, especially considering the length of the category names. 👀

[possumbilities]

Another solution worth exploring from this pending PR, that's similar in UX (but for tags):

• https://github.com/creativecommons/cc-resource-archive/pull/83

[Cappybara12]

Improve list behavior and filter functionality to maintain list visibility when applying filters.

Additional context

Attaching a gif showing the enhanced list behavior and filter functionality in action. Here's my approach

[Murdock9803]

@possumbilities How about a 3 dropdowns - design for filtering of resources ? This will minimize the space taken, and also account for a better user experience. Please give your thoughts on this, as I have planned the designs and want to start working. @Everyone please give suggestions 🙌 The design looks clean and after a filter is selected, for example website, only website will display below the medium tab and can be easily unselected. Same goes for other tabs like topic and language.

The language dropdown will not be very large vertically, it will be as a CSS grid of 2 columns.