Edge の新しいページカラー設定と background-color や border 使用時のアクセシビリティ

<style>
	/* 好ましくないスタイル設定 */
	.gnav {
		display: block flex;

		& > li {
			display: block flow;

			& > a {
				--gnav-bgcolor: #fff;
				--gnav-color: #000;

				display: block flow;
				background-color: var(--gnav-bgcolor);
				padding: 1em;
				color: var(--gnav-color);

				&[aria-current] {
					--gnav-bgcolor: #ccc;
				}
			}
		}
	}
</style>

<nav aria-label="サイト">
	<ul class="gnav">
		<li><a href="/products">製品情報</a></li>
		<li><a href="/company" aria-current="true">会社概要</a></li>
		<li><a href="/recruit">採用情報</a></li>
	</ul>
</nav>

/* 背景が表示されない環境では枠線を表示する設定 */
.gnav {
	display: block flex;

	& > li {
		display: block flow;

		& > a {
			--gnav-border-width: 1px; /* ← 追加 */
			--gnav-bgcolor: #fff;
			--gnav-color: #000;

			display: block flow;
			border: var(--gnav-border-width) solid var(--gnav-bgcolor); /* ← 追加 */
			background-color: var(--gnav-bgcolor);
			padding: calc(1em - var(--gnav-border-width)); /* ← 変更 */
			color: var(--gnav-color);

			&[aria-current] {
				--gnav-bgcolor: #ccc;
			}
		}
	}
}