Focus ring definition

[yceballost]

Description

Define how focus ring is shown in all components

https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html

Some of the componentes currently fail in:

F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Vivo study of potential issues:

https://github.com/Telefonica/mistica-design/discussions/2081

We will rely in this technique to avoid SC failure:

https://www.w3.org/WAI/WCAG22/Techniques/general/G165

Child issues

• #2156
• #2155

Tasks

• [ ] Update specs
• [ ] Android ticket
• [ ] iOS ticket
• [ ] Web ticket

https://github.com/Telefonica/mistica-web/pull/1325

[aweell]

Web

Component name	Default	Inverse	Alternative	Media
Accordion			-	-
Boxed accordion			-	-
ButtonPrimary			-	-
Data Card
Poster Card
Checkbox
Chip
Counter		-	-	-
Tex field		-	-	-
Row
Boxed row
MenuItem
Radio group
Tabs
TextLink

Other issues

• Slider loses focus ring when moved with arrows
• In safari most of the focus rings in most brand are not visible in inverse (image attached)
• Boxed row don't show focus when has href https://teams.microsoft.com/l/message/19:[email protected]/1740736741144?tenantId=9744600e-3e04-492e-baa1-25ec245c6f10&groupId=bef9be07-03e4-4afb-8a79-f720a63e4c28&parentMessageId=1740736741144&teamName=Novum&channelName=WebCore-public&createdTime=1740736741144
• Input fields should not hide the border when focused
• Feedback focus and alert