Add focus indicator to File Details tabs view

[kevgathuku]

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]

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]

Some screenshots of the navigable UI after the fix:

Sharing tab:

File list view:

[jancborchardt]

@kevgathuku I also thought about just restoring the outline, but it doesn’t 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]

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

[jancborchardt]

@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]

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.

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]

@kevgathuku I would say it’s 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]

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

[kevgathuku]

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

[kevgathuku]

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]

@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]

Works like a charm. Didn't know there was such a guide 😄
Thanks @jancborchardt 👍

[jancborchardt]

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’m on Ubuntu. ;)

[kevgathuku]

This is once again ready for review
Changes:

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

2. 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]

@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’t worry about breaking stuff, as the main branches are protected.)

[jancborchardt]

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

[kevgathuku]

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]

cc @nextcloud/designers

[jancborchardt]

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 :)

[kevgathuku]

Finally got merged 🎉 Thanks for all the feedback @jancborchardt
Happy to contribute more 😄

[skjnldsv]

Finally got merged

5 days is pretty quick for us 😆

[jancborchardt]

@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]

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