[a11y] 9.2.4.7 Current position of the focus clearly

[tschiebel]

audit: https://infinite.owncloud.com/s/PnaAukHGGsLnrMM

https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-2-4-7-aktuelle-position-des-fokus-deutlich

Personal

• The keyboard focus on dark blue buttons is very difficult to recognize.
  This problem also affects slider elements and toggle buttons.
  

• With some drop-down menus and "select" elements, the list elements are
  are very difficult to recognize as focused. As the focus is only highlighted by
  a color change, the contrast ratio between the focused and unfocused state should be at least
  unfocused state should be at least 3:1.
  

Shares

• The buttons in the table columns "Shared by" and "Shared with" have no visible keyboard focus.
  have no visible keyboard focus.
  

• See comments on Personal

Spaces

• The checkboxes on dark backgrounds have a keyboard focus that is difficult to recognize.
  keyboard focus. The "Deactivated" button also has an unrecognizable keyboard focus.
  keyboard focus.
  

• See comments on Personal

Account

• The "Receive notification mails" checkbox does not have a visible keyboard focus.

[pascalwengerter]

@tbsbdr needs a concept/decision regarding "focus color" and "background color for currently selected element in OcSelect"

[tbsbdr]

I'd suggest a two-color indicator so that the contrast of the focus is always high regardless of its background. It must not look ultra-nice, it must be clearly recognisable while eg. tabbing
https://www.w3.org/WAI/WCAG21/Techniques/css/C40#example-1-a-thick-two-color-indicator

*:focus {
	/* inner indicator */
	outline: 2px #F9F9F9 solid;
	outline-offset: 0;
	/* outer indicator */
	box-shadow: 0 0 0 4px #193146;
}

Visual

1

2

3

4

5

6