[a11y] 11.2.4.7 Focus visible

[Aitorbp]

Related Issues

App: #4369

• Add changelog files for the fixed issues in folder changelog/unreleased. More info here
• Add feature to Release Notes in ReleaseNotesViewModel.kt creating a new ReleaseNote() with String resources (if required)

---

QA

[Aitorbp]

This issue is blocked until a migration to Material 3 is done. This new approach has been proposed because there is a conflict between the colors when they are focused/unfocused. In addition, there is also a conflict between the focus color and the texts/icons that are inside the elements. If we have a Material 3 palette, all these conflicts should be solved.

Below are the things that have been taken into account in this issue, ignoring the further development of Material.
According to the issue, the color contrast requirements between the focus and unfocus colors must be met 3:01. This is the minimum recommended ratio. This ratio is not possible to meet.

Points to keep in mind:

List of files. The current focus of the default application (E5E5E5) does not meet the contrast with white (unfocus state). The contrast is 1.25:1, far from the minimum recommended.
This focus also does not meet the text (707575) that appears in the item. The ratio is 3.71:1 and would not meet the minimum ratio with respect to the text, which is 4.5:1. So it is not possible to put a color that meets both ratios at the same time.

Toolbar: This element presents a similar problem. If we put a white FFFFFF focus, the contrast ratio with respect to the blue background (2D5177) would be 2.78:1 (the color that would appear in the spotlight is 7C95B1). It would not meet the minimum recommended ratio, remember that it was 3:01.

At this point another doubt arises that is more visible in the create share dialog buttons. Should we put a dark or light focus? In this case the save button is disabled and has a lighter tone than usual. So if we also put a light focus, both elements may be visually confused. Therefore, it may be better to put the focus in a dark color. Open to discussion.

Another thing to keep in mind is that in this issue the color of the press element will not be taken into account. The only thing to know here is that the press element sets the elements to a darker shade.

On the other hand, we must also take into account the brandable colors. As the application is now, two brandable colors should be created for the focus. One for the toolbar and bottom navigation elements. And another for the buttons with the primary style (check style.xml) and the floating button.

This pull request has taken into account these considerations mentioned above. In addition, for buttons with borderless, a new style has been created that can fit with the focus (custom_borderless_button).

As a last piece of information to add, this branch has been taken from the keyboard navigator branch.

The work here is far from finished, but it is a good starting point to continue what has been started if Material is not finally implemented before this issue.

For the collection of colors the following page has been used: https://pickcoloronline.com/
For the contrasts this other one: https://webaim.org/resources/contrastchecker/