[Security] "Next" button label/text for pin required/passkey-pin input is unreadable

[stephendonner]

Description

Next button label/text for pin required/passkey-pin input is unreadable in Light mode

Steps to reproduce

1. install 1.69.23
2. launch Brave
3. insert an MFA device/passkey
4. load https://github.com
5. click on Log in
6. click on Use a passkey option
7. look at the resulting dialog

Actual result

The button text/label for the Next button isn't readable in Light mode

Expected result

The Next button's text should be readable, in both Dark and Light browser modes

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Brave | 1.69.23 Chromium: 126.0.6478.71 (Official Build) nightly (x86_64)
-- | --
Revision | 18f7cda0b21e2fd5a80aa0e7c862579270b64c8b
OS | macOS Version 11.7.10 (Build 20G1427)

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

cc @rebron @simonhong @bsclifton @fmarier @kdenhartog @brave/qa-team

[stephendonner]

This works in

Brave | 1.66.118 Chromium: 125.0.6422.147 (Official Build) (x86_64)
-- | --
Revision | 07af53490e0a52336cfb99a376f87671be258049
OS | macOS Version 11.7.10 (Build 20G1427)

[stephendonner]

And also is fine in Dark modes for the following builds:

1.66.118	1.69.23

[stephendonner]

I think this might be macOS-specific (maybe it happens on linux too?), as Windows 10 renders the buttons natively, it looks like:

[fmarier]

#38905 is another example of an unreadable button in light mode.

[simonhong]

Working on this now.

[kjozwiak]

The above requires 1.67.123 or higher for 1.67.x verification 👍

[LaurenWags]

Verified with

Brave | 1.67.123 Chromium: 126.0.6478.126 (Official Build) (x86_64)
-- | --
Revision | fc7619ef621fe4e6a0fa8b16c718f78ffc97a861
OS | macOS Version 13.6.7 (Build 22G720)

Note - unable to reproduce the issue using the PIN modal as I couldn't trigger this modal specifically, but was able to reproduce with the Passkey modal using https://demo.yubico.com/playground:

Using 1.67.119,

1. Navigated to https://demo.yubico.com/playground
2. Created an account
3. Clicked on "Add Internal Authenticator" under "Internal (Built-in) Authenticators"
4. On the modal, clicked "Save another way" button
5. Selected "Your Brave profile" option
6. Saw that the text on the "Continue" button was unreadable when using light theme, but readable (if slightly difficult) with dark theme

Light	Dark

Upgraded to 1.67.123 and re-ran above steps. Confirmed "Continue" button was readable for both light and dark themes on the Passkey modal:

Light	Dark

[stephendonner]

For posterity, also checked this using

Brave | 1.67.123 Chromium: 126.0.6478.126 (Official Build) (x86_64)
-- | --
Revision | fc7619ef621fe4e6a0fa8b16c718f78ffc97a861
OS | macOS Version 11.7.10 (Build 20G1427)