Emulator warning banner text is not accessible

[markgoho]

[REQUIRED] Describe your environment

n/a

[REQUIRED] Describe the problem

Steps to reproduce:

Run emulators, see warning banner

Relevant Code:

firebase-js-sdk/packages-exp/auth-exp/src/core/auth/emulator.ts

Lines 116 to 133 in 5ad7ff2

	function attachBanner(): void {
	const el = document.createElement('p');
	const sty = el.style;
	el.innerText =
	'Running in emulator mode. Do not use with production credentials.';
	sty.position = 'fixed';
	sty.width = '100%';
	sty.backgroundColor = '#ffffff';
	sty.border = '.1em solid #000000';
	sty.color = '#ff0000';
	sty.bottom = '0px';
	sty.left = '0px';
	sty.margin = '0px';
	sty.zIndex = '10000';
	sty.textAlign = 'center';
	el.classList.add('firebase-emulator-warning');
	document.body.appendChild(el);
	}

specifically:

sty.backgroundColor = '#ffffff';
sty.color = '#ff0000';

This color text on that background and at that font size produces a color contrast ratio of 3.99

There's an easy fix: make the color a darker red. PR #4868 fixes this issue.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.