Skip to content

Conversation

@Shrinks99
Copy link
Collaborator

@Shrinks99 Shrinks99 commented Feb 1, 2024

Fixes #1387

Context

While checking some other keyboard navigation issues, I found that I was unable to create a crawl workflow using only keyboard navigation. This PR fixes that!

Changes

  • Changes from <div>s to <button>s so that these can be selected with tab and enter.
  • Adds tabindex for correct selection of items
  • Removes the H3 & combines with window title
  • Adds width and height to image and width to its container, should make for a more stable layout while loading ([Bug]: Avoid flash-of-missing-image when creating new workflow #1387)

Screenshots

Before — Image not loaded VS loaded
Screenshot 2024-01-31 at 11 50 43 PM

After — Both images loaded, URL list focused!
Screenshot 2024-01-31 at 11 38 50 PM

Image not loaded VS loaded
Screenshot 2024-01-31 at 11 49 50 PM

- Changes from `<div>`s to `<button>`s so that these can be selected with tab and enter.
- Adds tabindex for correct selection of items
- Removes the H3, combines with window title
@Shrinks99 Shrinks99 added bug Something isn't working front end Requires front end dev work labels Feb 1, 2024
@Shrinks99 Shrinks99 self-assigned this Feb 1, 2024
@ikreymer
Copy link
Member

ikreymer commented Feb 7, 2024

Tested keyboard nav, appears to be working, nice!

@ikreymer ikreymer merged commit 3982064 into main Feb 7, 2024
@ikreymer ikreymer deleted the frontend-fix-workflow-keyboard-navigation branch February 7, 2024 23:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working front end Requires front end dev work

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Avoid flash-of-missing-image when creating new workflow

3 participants