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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add focus indicator to File Details tabs view #9956

Merged
merged 1 commit into from Jun 26, 2018

Conversation

Projects
None yet
5 participants
@kevgathuku
Copy link
Contributor

commented Jun 21, 2018

This is a potential solution to #9944

It enables the outline by default so that the website is easily navigable via keyboard
Feedback appreciated 馃槃

@codecov

This comment has been minimized.

Copy link

commented Jun 21, 2018

Codecov Report

鉂楋笍 No coverage uploaded for pull request base (master@ab266a7). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #9956   +/-   ##
=========================================
  Coverage          ?   52.07%           
  Complexity        ?    25984           
=========================================
  Files             ?     1651           
  Lines             ?    95983           
  Branches          ?     1290           
=========================================
  Hits              ?    49984           
  Misses            ?    45999           
  Partials          ?        0
@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 21, 2018

Some screenshots of the navigable UI after the fix:

Sharing tab:
screen shot 2018-06-21 at 21 54 53

File list view:
screen shot 2018-06-21 at 21 54 28

@kevgathuku kevgathuku requested a review from jancborchardt Jun 21, 2018

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 21, 2018

@kevgathuku I also thought about just restoring the outline, but it doesn鈥檛 look so nice. What we should do is simply also add the proper :focus/:active effect so it works the same as for :hover. :) Like for example we did with #9951 (Keyboard navigation accessibility)

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 21, 2018

Thanks for the tips @jancborchardt
I'll look into implementing a similar solution for this

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 21, 2018

@kevgathuku great, thanks! :) Keep in mind to do it step by step, small separate pull requests. :) For example, start with fixing only the headers in the sidebar as you mentioned in the original issue.

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 21, 2018

Thanks once again. I'll focus on that section for now @jancborchardt

For the file details view the current hover effect is to underline the tab. I'm not sure the same underlining effect for the focus state would work very well.
It might cause confusion between the focused and selected tabs.

screen shot 2018-06-22 at 00 01 53

For example, in this image, the Comments tab is the selected one / currently active.
The Versions tab is hovered / in focus.

Restoring the browser default outline might just work, at least for the tabs section.

What do you think of this?
In the meantime, I'm also exploring other ways to do it that might be less confusing.

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 21, 2018

@kevgathuku I would say it鈥檚 two different steps: 1) visualizing :hover exactly as we do :focus and 2) thinking about how we want to visualize it.

I would say this pull request is about 1). :) And the current way to visualize is fine, but we can of course talk about it 鈥 but after we fix the basic accessibility.

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 21, 2018

@kevgathuku in other words: What you show in the screenshot is great! 馃槂

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 21, 2018

Got it @jancborchardt
I'll focus on the first step with the current effect 馃憤

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 22, 2018

Hi @jancborchardt would you happen to know if there is some guide on how to set up a local dev environment, or a resource you can recommend? I'm using a Mac currently and I'm currently having trouble setting up the project for development.

I'm currently following the instructions at https://docs.nextcloud.com/server/12/admin_manual/installation/system_requirements.html#recommended-setup-for-running-nextcloud and https://docs.nextcloud.com/server/12/developer_manual/general/devenv.html
and I'm stuck with installing nextcloud on the apache server.
Also not sure if this is the right place to ask this kind of question? If it's not please, point me to the correct place 馃槃
Thanks

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 22, 2018

@kevgathuku yup! The simplest guide for setting up a dev environment on macOS is at https://github.com/jancborchardt/nextcloud-scripts/blob/master/Nextcloud%20macOS%20development%20environment.md 鈥 let me know if that works. :)

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 22, 2018

Works like a charm. Didn't know there was such a guide 馃槃
Thanks @jancborchardt 馃憤

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 22, 2018

Works like a charm. Didn't know there was such a guide

Yeah, I need to add it to the docs :) good to know that it works for you too 鈥 I only checked it with friends macOSes cause I鈥檓 on Ubuntu. ;)

@kevgathuku kevgathuku changed the title Restore default outline to enable visible focus Add focus indicator to File Details tabs view Jun 25, 2018

@kevgathuku kevgathuku force-pushed the kevgathuku:enable-outline branch from 3dff988 to 4e41e79 Jun 25, 2018

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 25, 2018

This is once again ready for review
Changes:

  1. Enable focus indicator for file details tab. Current result with Versions tab focused:

screen shot 2018-06-25 at 10 28 43

  1. Enable click indicator for the tabs i.e. when a tab is focused, clicking on Spacebar or Enter should select the tab
    cc @jancborchardt
@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 25, 2018

@kevgathuku nice! :) cc @nextcloud/javascript for review too.

I just noticed that the underline is now grey whereas it used to be black, which is much more visible. We should change it back to that, using:

border-bottom: 1px solid var(--color-text-lighter);

Also, for better clickability the minimum size of the tab headers should be 44px, which can be achieved using:

.tabHeaders .tabHeader {
    padding: 12px;
}

Can you adjust that @kevgathuku? :) (Since you are member of the Nextcloud organization here on Github, you can also do branches in the server repository itself, then we can collaborate easily on branches. :) Don鈥檛 worry about breaking stuff, as the main branches are protected.)

@@ -780,19 +780,12 @@ kbd {
font-weight: 600;
border-bottom: 1px solid var(--color-border);

This comment has been minimized.

Copy link
@jancborchardt

jancborchardt Jun 25, 2018

Member

This line can be removed because the border-bottom for .selected is set in line 788 down below. :)

@jancborchardt jancborchardt referenced this pull request Jun 25, 2018

Merged

Accessibility 鈾 #9862

@kevgathuku kevgathuku force-pushed the kevgathuku:enable-outline branch from 4e41e79 to 7b9f7dd Jun 25, 2018

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 25, 2018

Thanks for the pointers @jancborchardt
In future I'll create all branches on the repo. I agree, it will make collaborating much easier 馃槃

Finally, I've made the requested changes

@MorrisJobke MorrisJobke requested a review from juliushaertl Jun 25, 2018

@MorrisJobke MorrisJobke requested a review from skjnldsv Jun 25, 2018

@MorrisJobke

This comment has been minimized.

Copy link
Member

commented Jun 25, 2018

Add focus indicator for file details view tabs
Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>

@kevgathuku kevgathuku force-pushed the kevgathuku:enable-outline branch from 7b9f7dd to 4e1feb5 Jun 25, 2018

@jancborchardt
Copy link
Member

left a comment

This is super awesome @kevgathuku! :) Just wrote a comment on a file using keyboard only and it worked well. 馃帀

cc @nextcloud/accessibility for review too :)

@skjnldsv skjnldsv added 4. to release and removed 3. to review labels Jun 25, 2018

@MorrisJobke MorrisJobke merged commit a17750d into nextcloud:master Jun 26, 2018

1 of 2 checks passed

continuous-integration/drone/pr the build failed
Details
Scrutinizer 1 new issues
Details

@kevgathuku kevgathuku deleted the kevgathuku:enable-outline branch Jun 26, 2018

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 26, 2018

Finally got merged 馃帀 Thanks for all the feedback @jancborchardt
Happy to contribute more 馃槃

@skjnldsv

This comment has been minimized.

Copy link
Member

commented Jun 26, 2018

Finally got merged

5 days is pretty quick for us 馃槅

@jancborchardt

This comment has been minimized.

Copy link
Member

commented Jun 26, 2018

@kevgathuku awesome work! :) It would also be great to have you at our Nextcloud Conference in Berlin late August: https://nextcloud.com/conf 鈥 we provide up to 80% travel/accomodation support for contributors! 馃帀

@kevgathuku

This comment has been minimized.

Copy link
Contributor Author

commented Jun 26, 2018

Amazing! I'll check out the conference and apply.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.