URL address of the page where you encountered the problem
https://test.dev.finto.fi/fi/ (yhteishaku sanastoista)
https://test.dev.finto.fi/yso/fi/ (syötä haettava termi)
Description of the problem
In the language selector dropdown (#language-list, role="radiogroup"), keyboard focus correctly moves to the active <li> item (roving tabindex is implemented: the active item has a tabbable index, the others tabindex="-1", and the nested native <input type="radio"> is intentionally set to tabindex="-1" so it does not receive Tab focus itself). However, no visible focus indicator (outline, border, highlight, etc.) is rendered on the focused item, so a sighted keyboard user cannot tell which language option currently has focus.
The active item also uses tabindex="1" instead of tabindex="0", which is a secondary issue: positive tabindex values are placed ahead of all tabindex="0" elements in the browser's tab order regardless of DOM position, which can break the page's overall logical focus order.
Testing instructions
- Open the page and use Tab to reach the language selector button, then open the dropdown.
- Use Tab / Arrow keys to move focus into the list of language options (#language-list).
- Observe that no visible indicator (outline, highlight, border) appears on the item that currently has focus.
- In DevTools, inspect the focused
<li> element's computed styles under the :focus state to confirm whether outline: none (or equivalent) is being applied.
Language selector issue: yhteishaku
Search results issue: in every search
Note that the same focus indicator problem can be seen also in search results lists.
Expected result after the fix: the currently focused language option has a clearly visible, sufficiently contrasted focus indicator (e.g. an outline) at all times while navigating the list with the keyboard.
Severity
Medium/High – violates a Level AA success criterion (2.4.7), affects all keyboard-only users trying to select a language, and prevents them from knowing which option is currently focused/would be activated.
Fix instructions
- Identify and remove (or override) the CSS rule that suppresses the default focus outline on the
<li> (or its nested <label>) in #language-list, and add an explicit, sufficiently contrasting focus style.
- Ensure the outline meets non-text contrast requirements (WCAG 1.4.11, ≥ 3:1 against the adjacent background).
- Change the active item's tabindex="1" to tabindex="0" so the roving-tabindex pattern doesn't disrupt the page's natural tab order.
Browsers
Firefox, Chrome, NVDA
URL address of the page where you encountered the problem
https://test.dev.finto.fi/fi/ (yhteishaku sanastoista)
https://test.dev.finto.fi/yso/fi/ (syötä haettava termi)
Description of the problem
In the language selector dropdown (#language-list, role="radiogroup"), keyboard focus correctly moves to the active
<li>item (roving tabindex is implemented: the active item has a tabbable index, the others tabindex="-1", and the nested native<input type="radio">is intentionally set to tabindex="-1" so it does not receive Tab focus itself). However, no visible focus indicator (outline, border, highlight, etc.) is rendered on the focused item, so a sighted keyboard user cannot tell which language option currently has focus.The active item also uses tabindex="1" instead of tabindex="0", which is a secondary issue: positive tabindex values are placed ahead of all tabindex="0" elements in the browser's tab order regardless of DOM position, which can break the page's overall logical focus order.
Testing instructions
<li>element's computed styles under the :focus state to confirm whether outline: none (or equivalent) is being applied.Language selector issue: yhteishaku
Search results issue: in every search
Note that the same focus indicator problem can be seen also in search results lists.
Expected result after the fix: the currently focused language option has a clearly visible, sufficiently contrasted focus indicator (e.g. an outline) at all times while navigating the list with the keyboard.
Severity
Medium/High – violates a Level AA success criterion (2.4.7), affects all keyboard-only users trying to select a language, and prevents them from knowing which option is currently focused/would be activated.
Fix instructions
<li>(or its nested<label>) in #language-list, and add an explicit, sufficiently contrasting focus style.Browsers
Firefox, Chrome, NVDA