All results grid

[zackkrida]

Fixes

Fixes #146 by @zackkrida

Description

Todos

• Nuxt link around audio boxes prevents use of play/pause button
• Load more button doesn't work 😱
• Prevent refetching images/audio when navigating to the audio/image endpoints, if the search query doesn't change
• Client-side searches fetch media twice! 😨
• Header loading state appears incorrect while loading results
• Reduce the column count when the filter sidebar is open
• Tests 😢

Random information

• I'm using a seeded pseudo random number generator so that the randomness of audio result placement amongst the images is consistent based on the search result set. The 'seed' (think of it as a unique hash that makes our random number generator produce the same series of numbers each time it is called) is a string of the first and last result IDs for the search.
  • This means that some audio results aren't shown from the initial batch until 'load more' is clicked. Think about it: say a search returned 10k image results and 10k audio results, we'd have 20 images and 20 audio tracks on the first result page, which wouldn't look very good per the design. Instead, the amount of audio results we show is somewhat arbitrary. I think this is an acceptable user experience.
• We need to do a major audit of state management in Openverse. There's quite a mix of local state, prop drilling, parent components accessing the store and passing values to children as props, and so on, that's inconsistent and unpredictable. Here I chose to access the store directly in the grid component, knowing we can refactor later.
• I tried to make as little modifications to support the "all" view in the store, actions, and mutations as possible.

Screenshots

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.

[sarayourfriend]

This is looking really good so far. Visually there's only a couple minor bugs. From an accessibility perspective however, there are some significant bugs with the audio result component.

Audio results need to be composite items with the play/pause button removed from the default tab order. Currently tabbing through each result is fine until you hit an audio result which will tab from the result link into the play/pause button before moving on to the next result. The tab order should just be each result. This happens both with and without VoiceOver activated.

Without VoiceOver, there's also something in the tab order between the filters button in the header and the first "See all ..." content button, but I'm not sure what it is. I couldn't get the same thing to happen in Safari with VoiceOver so I don't think it's an sr-only piece of text or something like that, but it might be.

With VoiceOver, the audio results are not announcing their title. I think this would be fixed with the composite items as I believe they require aria-label which would announce the title.

Long audio titles need to be truncated:

The license icon box on the images cuts into the rounded corners. It just needs the lower-start corner to be rounded.

The bottom corners of audio results are not rounded:

[zackkrida]

Thank you for the audio suggestions @sarayourfriend! I'll prioritize those.