bug: IOS dark/light button and item focus does not have sufficient contrast (accessibility issue)

[nloding]

Bug Report

Ionic version: [x] 4.x

Current behavior: When tabbing to the IOS dark button, there is no visible change in styles to indicate that the button has focus. (The Material/Andriod dark button has a visible change.)

Expected behavior: A visible change in the styling to indicate it has focus.

Steps to reproduce:

1. Visit https://ionicframework.com/docs/api/button, or any 4.x IOS application with a <IonButton color="dark">Dark</IonButton> (or Angular/etc. equivalent)
2. Tab to the dark button to give it focus

[liamdebeasi]

Thanks for the issue. Can you clarify the problem you are running into? Buttons on iOS when focused do not change color. There is an ::after pseudo element that changes opacity from 0 to 1 when the button is focused which results in the button appearing lighter/darker. I am seeing this visual change happen on the dark button as well, though it is subtle.

[nloding]

@liamdebeasi The focus on the dark button is too subtle to meet WCAG requirements. A user with low vision using assistive technology would have a hard time identifying that the button has been focused. Maybe it's a difference with the color profiles on our monitors, but I cannot detect any style change when focusing on the dark button.

If you compare the Android buttons in that same demo, the dark button is very clearly focused. IOS should have a similar result.

[liamdebeasi]

Thanks! Makes sense. I will mark this as a bug.