Improve accessibility with more visible focus indication for non vue apps

[CarlSchwan]

• Add a focus effect on each header entry
  

• Add a focus effect on app navigation
  

• Add a focus effect on menus
  

• Add a focus effect on file app
  

• Add a focus effect on non vue input elements
  

• Show big focus outline when using focus-visible instead of focus

• Add polyfill for focus-visible since it's only very recently available on WebKit

• Add a few small screen readers improvements in the file app (checkbox)

I used https://www.sarasoueidan.com/blog/focus-indicators/ to make
sure the focus effect was WCAG 2 and WCAG 2.1 compliant.

Signed-off-by: Carl Schwan carl@carlschwan.eu

[skjnldsv]

See comments

[CarlSchwan]

@CarlSchwan any update here? Would be good to get this in early in the 25 cycle then. :)

I just rebased everything and fixed/commented on the review from @skjnldsv :)

[PVince81]

some visual issues:

• bug: missing padding on left of the box, it's there for the other columns

• bug: border a bit cropped and also not fully centered:

apart from that it looks rather good!

I found some elements that are not focussable yet like the expanding arrow in the left sidebar, likely something for a separate PR as it's not directly related

[PVince81]

@CarlSchwan regarding the left navigation, I suspect that we'll want to add this focus border also in nextcloud-vue so we need to make sure there is no conflict there when it happens.

can you check if the issue you fixed is specific to the files app navigation panel or affects other apps ?

[JuliaKirschenheuter]

Thank you for working on this issue and taking over accessibility topics! And sorry for late response!
I'm just trying to understand, to which issue (ticket) is this PR related to? There are much changes and i don't really know what should i actually check.

I think there are a lot of stuff which are related to all components (nc-vue). Sorry if i have missed something, but why this changes are not in nc-vue, but here?

Have you fixed mostly visual stuff in this ticket? (or have you also adopted it to screen reader)? *not all buttons have (aria-label)
Could you explain, what this focus should cause (i haven't get it, sorry)?

"Shares" on the left sidebar have 2 stops.

Contacts have no focus

Some<li> on a left sidebar are focusible with other design

same here in dropdown

"Toggle" have 2 stops

Focus of this dropdown menu will not go away with Esc (will not disappear)

And i think some of this visual issues would be better done in nc-vue? (@skjnldsv or i'm wrong in this point?)

@CarlSchwan sorry if i checked "too much". It is great, that you work on it! I think it would be better to split this "elephant" improvements into smaller tickets - would be better to work on and to review! If you want - i could take over of a part of this tickets, you should't be alone =))

[CarlSchwan]

Thank you for working on this issue and taking over accessibility topics! And sorry for late response! I'm just trying to understand, to which issue (ticket) is this PR related to? There are much changes and i don't really know what should i actually check.

I think there are a lot of stuff which are related to all components (nc-vue). Sorry if i have missed something, but why this changes are not in nc-vue, but here?

These changes are mostly for the parts that are not yet ported to vue. E.g. the files app and the navbar.

Have you fixed mostly visual stuff in this ticket? (or have you also adopted it to screen reader)? *not all buttons have (aria-label) Could you explain, what this focus should cause (i haven't get it, sorry)?

It's mostly about keyboard navigation where having a focus effect visible is important. Screen reader navigation is a separate task unfortunately :(

"Shares" on the left sidebar have 2 stops.

Looks correct to me

Contacts have no focus

Let's move that to another PR, it's fairly separated from the rest of this PR in the cod and like you already this PR is already big.

Some<li> on a left sidebar are focusible with other design same here in dropdown

fixed

"Toggle" have 2 stops

fixed

Focus of this dropdown menu will not go away with Esc (will not disappear)

preexisting issue :( Probably for the contact view it would be easier to port it to vue than to fix it

And i think some of this visual issues would be better done in nc-vue? (@skjnldsv or i'm wrong in this point?)

I fixed the patch to make even more sure we don't modify vue apps, as like you said those should be modified in nc-vue

This is not a vue app so we can't use nc-vue here :(

@CarlSchwan sorry if i checked "too much". It is great, that you work on it! I think it would be better to split this "elephant" improvements into smaller tickets - would be better to work on and to review! If you want - i could take over of a part of this tickets, you should't be alone =))

One stuff we could separate is the contact search who like you pointed out is not really working (both visual focus and keyboard navigation)

[JuliaKirschenheuter]

Thanks for your reply / fix!

Could you explain, what this focus should cause (i haven't get it, sorry)?

It's mostly about keyboard navigation where having a focus effect visible is important. Screen reader navigation is a separate task unfortunately :(

Ok, sure. I meant here, that a user cannot interact with this focus area. I would suggest to stop on the next interaction element: "Shared".

"Shares" on the left sidebar have 2 stops.

Looks correct to me

Ok, now for me too. I think a "shares" element should be somehow reworked in another PR, that it would have only 1 stop on interaction element (without whole "Shares", it makes not much sense).

"Toggle" have 2 stops

fixed

*still have 2 stops)

Lets move other stuff to separate tickets and do them one-by-one =)

Would you make only one commit to this PR?

[AndyScherzinger]

Resolves #31239

[PVince81]

👍 let's move forward

[CarlSchwan]

Need a rebase :) Going to do it today and then merge it