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

Focusable elements are not focused making it difficult to know what you're interacting with #4298

Open
nickcolley opened this issue Nov 21, 2018 · 15 comments

Comments

@nickcolley
Copy link

@nickcolley nickcolley commented Nov 21, 2018

Issue Type (check one)

  • Bug Report

Description (type any text below) -->

When tabbing through the Spectrum interface it's difficult to know what you're interacting with since the outlines for tabbable elements have been removed.

If you force outlines back on you can see what is being tabbed.

*:focus {
    outline: 3px solid orange !important;
    outline-offset: -2px;
}

You might want to consider https://github.com/WICG/focus-visible if you're worried about having too many focus outlines in your interface.

@spectrum-bot spectrum-bot bot added the Bug label Nov 21, 2018
@mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Nov 21, 2018

As mentioned in the thread in the community, I think a great first step would be to make all hover states also apply on focus, that should get us pretty far already (and also improve the mobile experience!).

If anybody wants to tackle that, a quick search for ":hover" in src/ should give you a list of all the places!

@reddysridhar53
Copy link

@reddysridhar53 reddysridhar53 commented Dec 1, 2018

Can I work on this?

@mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Dec 1, 2018

Yes please @reddysridhar53! 🙏

@reddysridhar53
Copy link

@reddysridhar53 reddysridhar53 commented Dec 1, 2018

@mxstbr Can you help in understanding what is our final goal here? Having focus state for all actionable items or Accessibility ?

@mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Dec 1, 2018

Both!

@code4cake
Copy link

@code4cake code4cake commented Dec 3, 2018

May I take this?

@mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Dec 3, 2018

It'd be great if you split the work with @reddysridhar53!

@nickcolley
Copy link
Author

@nickcolley nickcolley commented Dec 3, 2018

Happy to review this work folks :)

@mxstbr if this goes well and we plan for more work like this, is there a way to compensate the people doing the work? Like with open collective etc

@reddysridhar53
Copy link

@reddysridhar53 reddysridhar53 commented Dec 4, 2018

Hi @mxstbr , I was looking around for suitable suits to implement this and found https://github.com/WICG/focus-visible to be good. What do you think of us using this in the application?

@code4cake
Copy link

@code4cake code4cake commented Dec 4, 2018

Hey @reddysridhar53 would you mind spitting the work between both of us or you rather tackle it alone ?

@mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Dec 4, 2018

Yeah that sounds reasonable!

@superbryntendo
Copy link
Contributor

@superbryntendo superbryntendo commented Dec 4, 2018

Good question @nickcolley! There currently aren't plans to compensate contributors. I know accessibility is certainly undervalued in the industry and while we'd like to be part of the solution, it's just not something we're prepared to tackle at the moment...

@reddysridhar53
Copy link

@reddysridhar53 reddysridhar53 commented Dec 5, 2018

@dantesolis we can split the work. I already started on focus-visible, would you be taking up the Accessibility?

@code4cake
Copy link

@code4cake code4cake commented Dec 9, 2018

@reddysridhar53 I can take accessibility

@el1f
Copy link

@el1f el1f commented Oct 12, 2019

Hey guys! Has there been any update on this?

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

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.