Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong focus style in image components #3193

Closed
fcoveram opened this issue Oct 13, 2023 · 0 comments · Fixed by #4959
Closed

Wrong focus style in image components #3193

fcoveram opened this issue Oct 13, 2023 · 0 comments · Fixed by #4959
Assignees
Labels
🕹 aspect: interface Concerns end-users' experience with the software design: ready Issue with a mockup ready for implementation 🛠 goal: fix Bug fix 🧱 stack: frontend Related to the Nuxt frontend

Comments

@fcoveram
Copy link
Contributor

Description

Box and large variants of image component mirror the focus style of the small variant instead of having the "bold filled" style applied. This creates a visual inconsistency in some breakpoints of Image results, and on all breakpoints of "All content" results.

On the other hand, small variant's focus style is correct, except for the radius value. It should be 2px instead of 4px.

Focus version of image component. Border radius is highlighted

Reproduction

All content flow

  1. Search anything and land on the All content results
  2. Navigate through the results area with your keyboard
  3. See how focus styles change between image and audio items.
Focus.styles.in.all.content.results.mp4

Image flow

  1. Search anything on a big device
  2. Land on the All content results
  3. See how the focus style is different than its design.
Focus.styles.in.Image.results.mp4
@fcoveram fcoveram added 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🛠 goal: fix Bug fix 🕹 aspect: interface Concerns end-users' experience with the software 🧱 stack: frontend Related to the Nuxt frontend design: ready Issue with a mockup ready for implementation labels Oct 13, 2023
@github-project-automation github-project-automation bot moved this to 📋 Backlog in Openverse Backlog Oct 13, 2023
@obulat obulat removed the 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work label Oct 13, 2023
@openverse-bot openverse-bot moved this from 📋 Backlog to 🏗 In Progress in Openverse Backlog Sep 23, 2024
@obulat obulat self-assigned this Sep 26, 2024
@openverse-bot openverse-bot moved this from 🏗 In Progress to ✅ Done in Openverse Backlog Oct 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🕹 aspect: interface Concerns end-users' experience with the software design: ready Issue with a mockup ready for implementation 🛠 goal: fix Bug fix 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants