border color in focused/active inputs

[AnaMontes11]

Goal

Valorar si todos los inputs deberían llevar border color en el estado focused (los inputs actuales no marcan su borde). Solo en el OTP/PIN o ningún caso.

Context

Para los nuevos OTP/PIN field, el equipo de Vivo propone aplicar un borde de color en el estado focused. Es una manera muy extendida de ayudar al usuario a centrarse en el input que tiene focused.

Impact

• Esta actualización en los inputs implicaría una mejora del componente en todas las marcas. Seguiría coherencia con el nuevo OTP/PIN y se aproximaría al standar de comportamiento para inputs.

• Los input field en focus llevarán el borde con su color de marca. Valorar si esto podría suponer algún problema para las OBs.

Discussion Questions

• ¿Cómo debería comportarse el input de error? tiene sentido que el borde aplique a todos los field a la vez o solo de manera individual?
• Valorar en esta actualización del componente incluir el estado hovered para desktop que actualmente no existe.

Additional considerations

Comunicación a OBs

Do you have a visual proposal?

https://www.figma.com/file/e8d3PkXitUJ1Jwgc9Y3mNc/branch/r2ZlMD7ctYzJ6XGYIcqfur/%F0%9F%94%B8-Input-Fields-%26-Forms-Component-Specs?type=design&node-id=0%3A1&mode=design&t=X87G32paVADMWrRE-1

[AnaMontes11]

In this discussion, it seems important to consider that according to WCAG guideline 2.4.7, the focus state must be clearly visible so that users who can see, but have certain difficulties, can identify which element they are on. Without clear focus state, users will be lost.

[HectorSancho]

Hello! I update the discussion with a document with tests on screens with text fields.

https://www.figma.com/file/sAVukczhd0tH72OFyoMReb/border-color-in-focused%2Factive-inputs?type=design&node-id=0%3A1&mode=design&t=1oxxtNNnxMEBDYHp-1

I think we should make the change as it improves the accessibility of the focused text fields.

I haven't seen any cons