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

fix: add tooltip, misc bug fixes, a11y fixes #59

Open
wants to merge 29 commits into
base: develop
Choose a base branch
from

Conversation

joannaong
Copy link
Collaborator

@joannaong joannaong commented Mar 8, 2023

Description

  1. added "inspect file" tooltip on dataset single page
  2. Navigating to a 404 page displays breadcrumbs
  3. Tooltip over “login” is misaligned
  4. about page mobile heading
  5. Style polish on cid card data single page and added a feature flag to use mocks
  6. Add back card-list-block
  7. Implement keyboard tabbing focus ring on buttons and links except for typeahead (Nauras will do on a different ticket)

Screenshots

Ticket link

@joannaong joannaong changed the title feat: tooltip feat: added "inspect file" tooltip on desktop single page Mar 8, 2023
@joannaong joannaong marked this pull request as draft March 8, 2023 18:44
@joannaong joannaong changed the title feat: added "inspect file" tooltip on desktop single page fix: add tooltip, misc bug fixes Mar 8, 2023
@joannaong joannaong marked this pull request as ready for review March 8, 2023 19:45
@joannaong joannaong requested a review from svvimming March 8, 2023 20:10
Copy link
Collaborator

@timelytree timelytree left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tooltip should never touch the edge of the screen. Let's give it an offset of ~1rem?

Screenshot 2023-03-09 at 10 21 41 AM

packages/fe/components/cid-card.vue Outdated Show resolved Hide resolved
packages/fe/components/cid-card.vue Outdated Show resolved Hide resolved
packages/fe/components/cid-card.vue Outdated Show resolved Hide resolved
packages/fe/components/cid-table.vue Outdated Show resolved Hide resolved
packages/fe/components/cid-card.vue Outdated Show resolved Hide resolved
packages/fe/components/tooltip.vue Outdated Show resolved Hide resolved
Copy link
Collaborator

@nicole-code nicole-code left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes made that address this tickett all look great to me locally!
Thanks @joannaong & @timelytree !

packages/fe/components/cid-card.vue Outdated Show resolved Hide resolved
packages/fe/components/tooltip.vue Outdated Show resolved Hide resolved
packages/fe/pages/about.vue Outdated Show resolved Hide resolved
@joannaong joannaong changed the title fix: add tooltip, misc bug fixes fix: add tooltip, misc bug fixes, keyboard tabbing Mar 10, 2023
@joannaong joannaong changed the title fix: add tooltip, misc bug fixes, keyboard tabbing fix: add tooltip, misc bug fixes, a11y fixes Mar 14, 2023
@joannaong joannaong marked this pull request as draft March 14, 2023 14:44
@joannaong joannaong marked this pull request as ready for review March 15, 2023 12:38
Copy link
Collaborator

@nicole-code nicole-code left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These may be a bit nit picky @timelytree and @joannaong but here goes ->

  1. This is happen when I tab over the page that I'm on - looks like the focus ring is cut off. Not sure if this is too nit picky

Screen Shot 2023-03-16 at 8 30 31 AM

  1. If I'm tabbing through through the site for the first time, I always have to hit the enter key twice on the Filters button before the filter panel opens
  2. If the Filters panel is open and I don't close it, once I tab off of the panel, the panel still stays open which obstructs the view of the datasets list. I know this is working as expected but I think, if we have time, we could add something where if the user tabs off of the panel, the panel closes.

Let me know what you all think! I can create tickets for any of these if we want to address then :)

@joannaong
Copy link
Collaborator Author

joannaong commented Mar 17, 2023

These may be a bit nit picky @timelytree and @joannaong but here goes ->

  1. This is happen when I tab over the page that I'm on - looks like the focus ring is cut off. Not sure if this is too nit picky
Screen Shot 2023-03-16 at 8 30 31 AM
  1. If I'm tabbing through through the site for the first time, I always have to hit the enter key twice on the Filters button before the filter panel opens
  2. If the Filters panel is open and I don't close it, once I tab off of the panel, the panel still stays open which obstructs the view of the datasets list. I know this is working as expected but I think, if we have time, we could add something where if the user tabs off of the panel, the panel closes.

Let me know what you all think! I can create tickets for any of these if we want to address then :)

@nicole-code

  1. Fixed
  2. This will be part of the typeahead ticket. when i remove the typeahead component, the enter works fine. You can confirm by clicking esc after the typeahead dropdown opens. Once esc is clicked, only clicking enter once works. Can you pls note on the typeahead tabbing ticket?
  3. I think we can skip this? blur in here will be hard to detect

@joannaong joannaong closed this Mar 17, 2023
@joannaong joannaong reopened this Mar 17, 2023
Copy link
Collaborator

@nicole-code nicole-code left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good on my end ! @joannaong @timelytree !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants