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

Open
fcoveram opened this issue Oct 13, 2023 · 0 comments
Open

Wrong focus style in image components #3193

fcoveram opened this issue Oct 13, 2023 · 0 comments
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
@obulat obulat removed the 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work label Oct 13, 2023
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
Status: 📋 Backlog
Development

No branches or pull requests

2 participants