Increase contrast for disabled toggles and label radio button groups (#560)

* Use a darker color for disabled text to improve contrast ratios

* Add darker neutral color to use for disabled text in settings

This balances the need for toggles in a disabled state to have a visually different text formatting while still meeting the WCAG AA requirement for 4.5:1.

* Group associated radio buttons and assign the existing label as a label for each group

Since the radio button groupings aren't using standard HTML radio button groups (<fieldset> with <legend>), this uses the ARIA method of role="radiogroup" and aria-labelledby={id} to associate each radio grouping with the label.

Visually there's no change.

* Formatted with prettier --write

Author: bacall213

src/pages/settings/RadioGroup.tsx

@@ -1,4 +1,10 @@
-import { createContext, type ReactNode, useContext, useMemo } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useId,
+} from "react";
 import "./RadioGroup.css";
 
 type TypeRadioContext = {
@@ -64,11 +70,16 @@ export function RadioGroup<T extends string>({
 		() => ({ name, selectedValue: defaultValue, isDisabled, onChange }),
 		[name, defaultValue, isDisabled, onChange]
 	);
+	const id = useId();
 
 	return (
 		<RadioContext.Provider value={contextValue}>
-			<div className={`RadioGroup ${isDisabled ? "disabled" : ""}`}>
-				{label}
+			<div
+				className={`RadioGroup ${isDisabled ? "disabled" : ""}`}
+				role="radiogroup"
+				aria-labelledby={id}
+			>
+				<label id={id}>{label}</label>
 				<div className="options">{children}</div>
 			</div>
 		</RadioContext.Provider>

src/pages/settings/Toggle.css

@@ -4,7 +4,7 @@
 }
 
 .Toggle.disabled label {
-	color: var(--neutral-500);
+	color: var(--neutral-600);
 }
 
 .Toggle button {

src/pages/settings/index.css

@@ -22,6 +22,7 @@
 	--orange-700: #c2410c;
 	--blue-600: #2563eb;
 	--neutral-500: #a3a3a3;
+	--neutral-600: #757575;
 }
 
 html {