Skip to content

fix(a11y): WCAG AA hint/helper text contrast sweep #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Bissbert merged 1 commit into from
May 5, 2026
Merged

fix(a11y): WCAG AA hint/helper text contrast sweep #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 214 additions & 0 deletions audits/T8-a11y-hints.md
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions src/components/admin/AdminPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,9 +334,9 @@ export function AdminPanel() {
<Card>
<CardContent className="p-0">
{loading ? (
<div className="p-8 text-center text-slate-400">Loading...</div>
<div className="p-8 text-center text-slate-500">Loading...</div>
) : pendingRequests.length === 0 ? (
<div className="p-8 text-center text-slate-400">No pending requests</div>
<div className="p-8 text-center text-slate-500">No pending requests</div>
) : (
<div className="divide-y divide-slate-100">
{pendingRequests.map((request) => (
Expand All @@ -345,7 +345,7 @@ export function AdminPanel() {
<div className="flex-1 min-w-0">
<p className="font-medium text-slate-900">{request.email}</p>
<p className="text-sm text-slate-600 mt-1">{request.reason}</p>
<p className="text-xs text-slate-400 mt-2">
<p className="text-xs text-slate-500 mt-2">
Submitted: {formatDate(request.submitted)}
</p>
</div>
Expand Down Expand Up @@ -379,27 +379,27 @@ export function AdminPanel() {
<Card>
<CardContent className="p-0">
{loading ? (
<div className="p-8 text-center text-slate-400">Loading...</div>
<div className="p-8 text-center text-slate-500">Loading...</div>
) : codes.length === 0 ? (
<div className="p-8 text-center text-slate-400">No codes yet</div>
<div className="p-8 text-center text-slate-500">No codes yet</div>
) : (
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-slate-100">
<th className="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-3">
<th className="text-left text-xs font-medium text-slate-600 uppercase tracking-wider px-4 py-3">
Code
</th>
<th className="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-3">
<th className="text-left text-xs font-medium text-slate-600 uppercase tracking-wider px-4 py-3">
Label
</th>
<th className="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-3">
<th className="text-left text-xs font-medium text-slate-600 uppercase tracking-wider px-4 py-3">
Uses
</th>
<th className="text-left text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-3">
<th className="text-left text-xs font-medium text-slate-600 uppercase tracking-wider px-4 py-3">
Created
</th>
<th className="text-right text-xs font-medium text-slate-500 uppercase tracking-wider px-4 py-3">
<th className="text-right text-xs font-medium text-slate-600 uppercase tracking-wider px-4 py-3">
Actions
</th>
</tr>
Expand All @@ -421,7 +421,7 @@ export function AdminPanel() {
{code.uses}
{code.maxUses !== null && ` / ${code.maxUses}`}
</td>
<td className="px-4 py-3 text-sm text-slate-400">
<td className="px-4 py-3 text-sm text-slate-500">
{formatDate(code.created)}
</td>
<td className="px-4 py-3 text-right">
Expand Down
6 changes: 3 additions & 3 deletions src/components/advanced/TreatmentDetection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export function TreatmentDetection() {
))}
</select>
</div>
<span className="text-xs text-slate-400 shrink-0 pb-0.5">{filteredTreatments.length} treatment{filteredTreatments.length !== 1 ? 's' : ''}</span>
<span className="text-xs text-slate-600 shrink-0 pb-0.5">{filteredTreatments.length} treatment{filteredTreatments.length !== 1 ? 's' : ''}</span>
</div>

{filteredTreatments.length > 0 ? (
Expand All @@ -228,7 +228,7 @@ export function TreatmentDetection() {
treatment: (
<div>
<p className="font-medium text-slate-900 text-xs">{treatment.treatment}</p>
<p className="text-xs text-slate-500">{treatment.gems}</p>
<p className="text-xs text-slate-600">{treatment.gems}</p>
</div>
),
visual: <span className="text-xs">{treatment.visualIndicators}</span>,
Expand All @@ -245,7 +245,7 @@ export function TreatmentDetection() {
variant="default"
/>
) : (
<div className="text-center text-slate-500 text-sm py-4 border border-slate-200 rounded-xl">
<div className="text-center text-slate-600 text-sm py-4 border border-slate-200 rounded-xl">
No treatments found matching your criteria.
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/auth/LockGate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function LockGate({ children }: LockGateProps) {
if (isLoading) {
return (
<div className="min-h-[60vh] flex items-center justify-center">
<div className="animate-pulse text-slate-400">Loading...</div>
<div className="animate-pulse text-slate-500">Loading...</div>
</div>
);
}
Expand Down Expand Up @@ -209,7 +209,7 @@ export function LockGate({ children }: LockGateProps) {
required
minLength={10}
/>
<p className="mt-1 text-xs text-slate-500">
<p className="mt-1 text-xs text-slate-600">
Minimum 10 characters
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/auth/ProtectedQuiz.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function ProtectedQuiz({ learnEntries }: ProtectedQuizProps) {

{isLoading ? (
<div className="text-center py-12">
<div className="animate-pulse text-slate-400">Loading questions...</div>
<div className="animate-pulse text-slate-500">Loading questions...</div>
</div>
) : config && selectedQuestions.length > 0 ? (
config.mode === 'exam' ? (
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/BirefringenceCalc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function BirefringenceCalc() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter the maximum and minimum refractive index values to calculate birefringence.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
Formula: Birefringence = RI(max) − RI(min)
</p>
</div>
Expand Down Expand Up @@ -88,7 +88,7 @@ export function BirefringenceCalc() {
/>
)}

<div className="text-xs text-slate-500 space-y-1">
<div className="text-sm text-slate-600 space-y-1">
<p><strong>Example (Quartz):</strong> 1.553 − 1.544 = 0.009 (Low)</p>
<p><strong>Example (Zircon):</strong> 1.984 − 1.925 = 0.059 (Very High)</p>
<p><strong>Note:</strong> Isotropic gems (cubic system) have no birefringence.</p>
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/CaratEstimator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export function CaratEstimator() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter stone dimensions to estimate carat weight.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
Formula: Weight = L × W × D × SG × Shape Factor
</p>
</div>
Expand Down Expand Up @@ -225,7 +225,7 @@ export function CaratEstimator() {
/>
)}

<div className="text-xs text-slate-500 space-y-1">
<div className="text-sm text-slate-600 space-y-1">
<p><strong>Note:</strong> These are estimates. Actual weight varies with exact proportions, girdle thickness, and cut quality.</p>
<p><strong>Example (1ct diamond):</strong> 6.5 × 6.5 × 4.0 mm, SG 3.52, Round = ~1.0 ct</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/CriticalAngleCalc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function CriticalAngleCalc() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter the refractive index to calculate the critical angle for total internal reflection.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
Formula: θc = arcsin(1 ÷ RI)
</p>
</div>
Expand Down Expand Up @@ -81,7 +81,7 @@ export function CriticalAngleCalc() {
</p>
</div>

<div className="text-xs text-slate-500 space-y-1">
<div className="text-sm text-slate-600 space-y-1">
<p><strong>Diamond (RI 2.417):</strong> θc = 24.4° — Excellent light return</p>
<p><strong>Corundum (RI 1.77):</strong> θc = 34.4° — Good light return</p>
<p><strong>Quartz (RI 1.55):</strong> θc = 40.2° — Moderate light return</p>
Expand Down
2 changes: 1 addition & 1 deletion src/components/calculator/DensityEstimator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function DensityEstimator() {
<p className="text-sm text-slate-600">
Calculate density (SG) for irregular or fragile stones using volume estimation methods.
</p>
<p className="text-xs text-slate-500 mt-2">
<p className="text-sm text-slate-600 mt-2">
<strong>Formula:</strong> Density = Weight ÷ Volume
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/calculator/DispersionCalculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export function DispersionCalculator() {
<p className="text-sm text-slate-600">
Enter the refractive index at red (C-line, 656nm) and violet (F-line, 486nm) wavelengths to calculate dispersion.
</p>
<p className="text-xs text-slate-500 mt-2">
<p className="text-sm text-slate-600 mt-2">
<strong>Formula:</strong> Dispersion = RI(violet) − RI(red)
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/LengthConverter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function LengthConverter() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter a value in either field to convert between length units.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
1 inch = 25.4 mm
</p>
</div>
Expand Down Expand Up @@ -74,7 +74,7 @@ export function LengthConverter() {
</FormField>
</div>

<div className="text-xs text-slate-500 space-y-1">
<div className="text-sm text-slate-600 space-y-1">
<p><strong>Common stone sizes:</strong></p>
<p>• 6.5mm round ≈ 1 carat diamond</p>
<p>• 7mm round ≈ 1.25 carat diamond</p>
Expand Down
8 changes: 4 additions & 4 deletions src/components/calculator/ResultCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function ResultCard({
onClick={handleCopy}
className={cn(
'absolute top-2 right-2 p-1.5 rounded-md transition-colors',
'text-slate-400 hover:text-slate-600 hover:bg-white/50',
'text-slate-500 hover:text-slate-600 hover:bg-white/50',
'focus:outline-none focus:ring-2 focus:ring-crystal-500 focus:ring-offset-2'
)}
aria-label={copied ? 'Copied!' : 'Copy result'}
Expand All @@ -87,7 +87,7 @@ export function ResultCard({

{/* Label */}
{label && (
<p className="text-sm text-slate-500 text-center mb-1">{label}</p>
<p className="text-sm text-slate-600 text-center mb-1">{label}</p>
)}

{/* Main value */}
Expand Down Expand Up @@ -120,7 +120,7 @@ interface ResultInlineProps {
export function ResultInline({ value, unit, label, className }: ResultInlineProps) {
return (
<span className={cn('inline-flex items-baseline gap-1', className)}>
{label && <span className="text-sm text-slate-500">{label}:</span>}
{label && <span className="text-sm text-slate-600">{label}:</span>}
<span className="font-semibold text-crystal-700">{value}</span>
{unit && <span className="text-sm text-crystal-700">{unit}</span>}
</span>
Expand Down Expand Up @@ -153,7 +153,7 @@ export function ResultGroup({ results, layout = 'horizontal', className }: Resul
>
{results.map((result, index) => (
<div key={index} className="text-center">
<p className="text-sm text-slate-500">{result.label}</p>
<p className="text-sm text-slate-600">{result.label}</p>
<p>
<span className="text-xl font-bold text-crystal-700">{result.value}</span>
{result.unit && (
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/SGCalculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export function SGCalculator() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter the weight of your stone in air and water to calculate its specific gravity.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
Formula: SG = Weight in air ÷ (Weight in air − Weight in water)
</p>
</div>
Expand Down Expand Up @@ -110,7 +110,7 @@ export function SGCalculator() {
</NumberResult>
)}

<div className="text-xs text-slate-500 space-y-1">
<div className="text-sm text-slate-600 space-y-1">
<p><strong>Example (Diamond):</strong> 3.52g in air, 2.52g in water = SG 3.52</p>
<p><strong>Tip:</strong> Ensure the stone is fully submerged and free of air bubbles.</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/TemperatureConverter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function TemperatureConverter() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter a value in either field to convert between temperature units.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
Formula: °F = (°C × 9/5) + 32
</p>
</div>
Expand Down Expand Up @@ -93,7 +93,7 @@ export function TemperatureConverter() {
</div>
</div>

<div className="text-xs text-slate-500">
<div className="text-sm text-slate-600">
<p><strong>Note:</strong> Heat treatment temperatures are approximate and depend on specific conditions including atmosphere, duration, and starting material.</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/calculator/ValidationMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function ValidationMessage({
'text-xs mt-1',
type === 'error' && 'text-red-500',
type === 'warning' && 'text-amber-500',
type === 'info' && 'text-slate-500',
type === 'info' && 'text-slate-600',
className
)}
role={type === 'error' ? 'alert' : 'status'}
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/WeightConverter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function WeightConverter() {
<div className="space-y-6">
<div className="text-sm text-slate-600">
<p>Enter a value in any field to convert between weight units.</p>
<p className="mt-2 text-xs text-slate-500">
<p className="mt-2 text-sm text-slate-600">
1 carat = 0.2 grams = 200 milligrams
</p>
</div>
Expand Down Expand Up @@ -107,7 +107,7 @@ export function WeightConverter() {
</FormField>
</div>

<div className="text-xs text-slate-500 space-y-1">
<div className="text-sm text-slate-600 space-y-1">
<p><strong>Common weights:</strong></p>
<p>• 1 carat engagement diamond ≈ 0.2g</p>
<p>• 5 carat sapphire ≈ 1.0g</p>
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/results/GemMatchBadges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function GemMatchBadges({
</span>
)}
{gem.propertyValue && (
<span className="text-slate-500 ml-1">({gem.propertyValue})</span>
<span className="text-slate-600 ml-1">({gem.propertyValue})</span>
)}
</span>
))}
Expand All @@ -78,7 +78,7 @@ export function GemMatchBadges({
</div>
</>
) : (
<p className="text-sm text-slate-500">{emptyMessage}</p>
<p className="text-sm text-slate-600">{emptyMessage}</p>
)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/calculator/results/GemMatchCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function GemMatchCard({
prop.matched && 'bg-crystal-100'
)}
>
<p className="text-slate-500">{prop.label}</p>
<p className="text-slate-600">{prop.label}</p>
<p
className={cn(
'font-medium',
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/results/GemMatchList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export function GemMatchList({
<h3 className="text-sm font-medium text-slate-700 mb-3">
{label}
{gems.length > 0 && (
<span className="ml-2 text-slate-500 font-normal">
<span className="ml-2 text-slate-600 font-normal">
({gems.length} {gems.length === 1 ? 'match' : 'matches'})
</span>
)}
Expand Down Expand Up @@ -104,7 +104,7 @@ export function GemMatchList({
)}
</>
) : (
<p className="text-sm text-slate-500 py-4 text-center bg-slate-50 rounded-lg">
<p className="text-sm text-slate-600 py-4 text-center bg-slate-50 rounded-lg">
{emptyMessage}
</p>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/calculator/results/MultiValueResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export function MultiValueResult({

return (
<div key={index} className="text-center">
<p className="text-sm text-slate-500">{result.label}</p>
<p className="text-sm text-slate-600">{result.label}</p>
<p>
<span
className={cn(
Expand Down
4 changes: 2 additions & 2 deletions src/components/calculator/results/NumberResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function NumberResult({
onClick={handleCopy}
className={cn(
'absolute top-2 right-2 p-1.5 rounded-md transition-colors',
'text-slate-400 hover:text-slate-600 hover:bg-white/50',
'text-slate-500 hover:text-slate-600 hover:bg-white/50',
'focus:outline-none focus:ring-2 focus:ring-crystal-500 focus:ring-offset-2'
)}
aria-label={copied ? 'Copied!' : 'Copy result'}
Expand All @@ -110,7 +110,7 @@ export function NumberResult({

{/* Label */}
{label && (
<p className="text-sm text-slate-500 text-center mb-1">{label}</p>
<p className="text-sm text-slate-600 text-center mb-1">{label}</p>
)}

{/* Main value with unit */}
Expand Down
4 changes: 2 additions & 2 deletions src/components/crystal/Crystal3DViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ export function Crystal3DViewer({
if (!isClient) {
return (
<div className={`flex items-center justify-center bg-slate-100 ${className}`}>
<div className="text-slate-400">Loading 3D viewer...</div>
<div className="text-slate-500">Loading 3D viewer...</div>
</div>
);
}
Expand Down Expand Up @@ -317,7 +317,7 @@ export function Crystal3DViewer({
</Canvas>

{/* Viewer controls overlay */}
<div className="absolute bottom-4 left-4 text-xs text-slate-500 bg-white/80 px-2 py-1 rounded">
<div className="absolute bottom-4 left-4 text-xs text-slate-600 bg-white/80 px-2 py-1 rounded">
Drag to rotate • Scroll to zoom
</div>
</div>
Expand Down
Loading
Loading