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

Remove blue outline when story node is focused #1497

Merged
merged 3 commits into from
Jul 23, 2017
Merged

Remove blue outline when story node is focused #1497

merged 3 commits into from
Jul 23, 2017

Conversation

brenordr
Copy link
Contributor

@brenordr brenordr commented Jul 20, 2017

Remove blue outline defined by the user argent

Issue:
Browsers define a blue outline when a node is on focus.
Setting the outline to none prevent this behavior
storybook version: 3.1.9

screenshot 2017-07-20 11 09 43

What I did

Reset the outline when a node is in focus to 'none'
at @storybooks/react and @storybooks/react-native

How to test

Run yarn run storybook
And click in one of the tests.

Fix blue outline at @sotybook/react
@brenordr brenordr changed the title Update index.html.js WIP: Update index.html.js Jul 20, 2017
@brenordr brenordr changed the title WIP: Update index.html.js Remove blue outline when node is focused Jul 20, 2017
Reset :focus outline to none
@ndelangen
Copy link
Member

At some point I'd like to get better keyboard accessibility, this is on my list. But for now, I guess I should just let this pass, and worry about improving it later.

@ndelangen
Copy link
Member

Thanks for the contribution @rodriguesbreno !

@ndelangen ndelangen merged commit 35f2846 into storybookjs:master Jul 23, 2017
@brenordr
Copy link
Contributor Author

@ndelangen Storybooks is a great project.
I'm glad to contribute.

Btw, I can help with the keyboard accessibility 😄

@ndelangen
Copy link
Member

That's great @rodriguesbreno!

What I'd like to happen is extract react components for storybook itself into the lib/components package. and re-evaluate their styling and markup to facilitate better keyboard accessibility.

Improve the UI in general and provide a collection of components suited for usage in addons.

@igor-dv
Copy link
Member

igor-dv commented Jul 26, 2017

It breaks this one - #1427. Just to be sure that is was expected.

@brenordr
Copy link
Contributor Author

@ndelangen I'll schedule sometime to explore it 😄

@ndelangen
Copy link
Member

What do you mean?

@brenordr
Copy link
Contributor Author

brenordr commented Jul 26, 2017

@igor-dv I see, so the blue outline is necessary for accessibility.
Maybe a better solution is add a blue line in the bottom of the focused,
but not a rectangle around

outline

Also, This outline must be only in this side bar,
Before the PR it was focusing even in the components in the storybook (in the preview area)

@igor-dv
Copy link
Member

igor-dv commented Jul 26, 2017

It's one of the options.. but maybe making it gray and thin will be even better. For example:

image

gray-outline

@ndelangen
Copy link
Member

So what I'd love to happen is to move this navigation component into lib/components and style it using glamorous.

Then give it some nice looking :active, :hover etc.

@brenordr
Copy link
Contributor Author

@igor-dv I agree gray and thin is better

@shilman shilman changed the title Remove blue outline when node is focused Remove blue outline when story node is focused Jul 27, 2017
@shilman shilman added cleanup Minor cleanup style change that won't show up in release changelog and removed feature request labels Jul 27, 2017
@Hypnosphi
Copy link
Member

@igor-dv I agree gray and thin is better

You might want to use Firefox then, that's how default outline looks there

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cleanup Minor cleanup style change that won't show up in release changelog
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants