Added focus states and improved general keyboard navigation

[Resaki1]

Description

Many interactive elements didn't have proper focus states and some couldn't be navigated to via keyboard at all. This has been fixed. Closes #1749

Changelog

• added missing focus states
• improved some existing focus states
• made some interactive elements focusable (e.g., settings dropdown)
• moved from .focus to .focus-visible for better UX
• improved print icon (not in scope but I just had to...)
• fixed board templates not being checked anymore after navigating back from extended config

Checklist

• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] The light- and dark-theme are both supported and tested
• [x] The design was implemented and is responsive for all devices and screen sizes
• [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

Visual Changes (examples)

Options of SettingsDropdown are focusable now:

Before (focus is on Participants):

After:

Before (hover and focus states are identical): https://user-images.githubusercontent.com/35272402/181032888-3dc02673-d446-4ab8-9aea-a9154f5e50cd.mov

After (separate states): https://user-images.githubusercontent.com/35272402/181033352-8ffb10ff-07c1-4813-b181-4517be31e573.mov

[timengel]

Is there a way to navigate the settings options on the left side using only the keyboard? Rn tab/shift+tab loops through the content on the right and back but afterwards it doesnt progress the options list.

Edit: It works in Blink. Firefox has the behaviour explained above (loop from the selected setting + elements on the right) and in WebKit/Safari the navigation only works on the right side and ignores the settings options on the left (plus, some elements on the right side are ignored, e.g. toggles).

The MacOS fix from the comment below did not fix this.

[timengel]

The keyboard navigation on the homepage works fine in Blink/Chromium browsers but in Firefox it only targets the header (languages, login, etc.) and skips the footer (app-info), and in Safari it doesnt target the page itself at all and jumps right into the URL field.

Edit: On MacOS this problem can be fixed by checking this box in System Preferences > Keyboard Settings:

[Resaki1]

The keyboard navigation on the homepage works fine in Blink/Chromium browsers but in Firefox it only targets the header (languages, login, etc.) and skips the footer (app-info), and in Safari it doesnt target the page itself at all and jumps right into the URL field.

Edit: On MacOS this problem can be fixed by checking this box in System Preferences > Keyboard Settings:

Thanks for the info. This seems to be a firefox on MacOS specific issue though, I don't think there's anything we can do about it: https://support.mozilla.org/en-US/questions/1278793

[Resaki1]

The keyboard navigation on the homepage works fine in Blink/Chromium browsers but in Firefox it only targets the header (languages, login, etc.) and skips the footer (app-info), and in Safari it doesnt target the page itself at all and jumps right into the URL field.

Edit: On MacOS this problem can be fixed by checking this box in System Preferences > Keyboard Settings:

Thanks for the info. This seems to be a firefox on MacOS specific issue though, I don't think there's anything we can do about it: https://support.mozilla.org/en-US/questions/1278793

[CronJorian]

Additionally it might be more pleasant to add a border around the scrumlr logo instead of just highlighting it. I think even the brightness on hover is brighter than on focus.

[Resaki1]

Not sure if this is intended, but if I go through the components by using TAB, at first all the column inputs come and then all the notes. If this is intended its fine, I was just confused and expected to go through every column, first input and then the notes of each column.

Additionally it is not possible by keyboard only to add notes. The input field is focussed, but no text input is possible (also not by pressing enter etc).

On the homepage a new element is focussed which is not visible at all. (Between the URL bar and the flags).

Maybe it's reasonable to create values for scale, brightness and some other things in the style.scss and reuse these values. It seems you use many different values for these functions and I don't know if this is always justified.

We already have a ticket for removing the tabIndex with a better document structure (#1713). I think those issues should better be resolved there