diff --git a/assets/css/style.css b/assets/css/style.css index 52f87444b..0c1bd7948 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,5 +1,29 @@ /* Custom styling goes here, if not in the tailwind.config.js theme */ +/* Accessible Color System - WCAG 2.1 AA Compliant */ +:root { + /* Text Colors */ + --color-text-primary: #1F2937; /* gray-800, 12.46:1 on white */ + --color-text-body: #374151; /* gray-700, 8.59:1 on white */ + --color-nav-text: #111827; /* gray-900, 15.3:1 on white */ + + /* Link Colors */ + --color-link: #B91C1C; /* red-700, 5.74:1 on white */ + --color-link-hover: #991B1B; /* red-800, 7.56:1 on white */ + --color-link-footer: #DC2626; /* red-600, 4.53:1 on white */ + + /* Background Colors */ + --color-accent-red: #B91C1C; /* red-700, ensures 5.74:1 contrast with white */ + --color-accent-red-dark: #B91C1C; /* red-700, darker variant */ + + /* Focus Indicators */ + --color-focus-ring: #2563EB; /* blue-600, 4.58:1 on white */ + + /* Footer */ + --color-footer-bg: #F9FAFB; /* gray-50, light background option */ + --color-footer-text: #1F2937; /* gray-800, high contrast */ +} + .space-x-20 { margin-left: 5rem; } @@ -17,7 +41,7 @@ } .medium-gray { - color: #ACADBE; + color: var(--color-nav-text, #111827); } .cnp-blue { @@ -33,7 +57,24 @@ } a { - color: #E63054; + color: var(--color-link, #B91C1C); + text-decoration: none; +} + +a:hover, +a:focus { + color: var(--color-link-hover, #991B1B); + text-decoration: underline; +} + +/* Footer-specific links (if needed) */ +footer a { + color: var(--color-link-footer, #DC2626); +} + +footer a:hover, +footer a:focus { + color: var(--color-link-hover, #991B1B); } .red-1 { @@ -41,7 +82,7 @@ a { } .bg-red-1 { - background: #E63054; + background: var(--color-accent-red, #B91C1C); } .red-2 { @@ -264,6 +305,45 @@ pre { padding: 16px; } +/* Accessible Focus Indicators */ +a:focus-visible, +button:focus-visible, +[role="button"]:focus-visible, +input:focus-visible, +textarea:focus-visible, +select:focus-visible { + outline: 3px solid var(--color-focus-ring, #2563EB); + outline-offset: 2px; + border-radius: 2px; +} + +/* Only remove outlines for non-keyboard focus */ +a:focus:not(:focus-visible), +button:focus:not(:focus-visible) { + outline: none; +} + +/* Skip Link - Hidden until focused */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + padding: 8px 16px; + background-color: var(--color-focus-ring, #2563EB); + color: #ffffff; + font-weight: 600; + text-decoration: none; + z-index: 1000; + border-radius: 0 0 4px 0; + transition: top 0.2s ease-in-out; +} + +.skip-link:focus-visible { + top: 0; + outline: 3px solid #ffffff; + outline-offset: 2px; +} + hr { margin-top: 1em; margin-bottom: 1em; @@ -371,4 +451,31 @@ pre { max-width: 400px; max-height: 300px; display: inline-block; +} + +/* Screen reader only - visually hidden but accessible */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +/* Make .sr-only elements visible when focused */ +.sr-only:focus, +.sr-only:active { + position: static; + width: auto; + height: auto; + padding: 0.5rem 1rem; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; + border-width: initial; } \ No newline at end of file diff --git a/impl-fix-ossf-1.md b/impl-fix-ossf-1.md new file mode 100644 index 000000000..955d088d7 --- /dev/null +++ b/impl-fix-ossf-1.md @@ -0,0 +1,13 @@ +# Implementation Notes: fix-ossf-1 (Phase 1) + +Scope: Critical contrast fixes, accessible focus/skip link, and keyboard/ARIA improvements for nav CTA/menu. + +Changes +- Added WCAG AA color tokens and updated `.bg-red-1`, nav text, and link colors to meet ≥4.5:1 contrast. +- Implemented global `:focus-visible` outlines and styled skip link; added skip link + `
`. +- Converted mobile menu trigger to a keyboard/ARIA-compliant ` - \ No newline at end of file + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && toggleButton.getAttribute('aria-expanded') === 'true') { + toggleButton.setAttribute('aria-expanded', 'false') + naviList.classList.add('hidden') + toggleButton.focus() + } + }) + diff --git a/layouts/baseof.html b/layouts/baseof.html index 7b5ae5721..5bb34ec14 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -7,10 +7,16 @@ {{with .Title }}{{.}} | {{end}}{{ .Site.Title }} - + - + {{ if .IsHome }} + {{ with site.GetPage "/hero" }} + + {{ end }} + {{ else }} + + {{ end }} @@ -33,12 +39,19 @@ +
- {{ partial "nav" . }} +
+ {{ partial "nav" . }} +
- {{ block "main" . }}{{ end }} +
+ {{ block "main" . }}{{ end }} +
- {{ partial "footer" . }} +
+ {{ partial "footer" . }} +
diff --git a/layouts/home.html b/layouts/home.html index 994a3fff4..3148af2bd 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -1,10 +1,13 @@ {{ define "main" }} +
{{ with .GetPage "hero" }} {{ partial "hero" . }} {{ end }} -
+
+
+

Key Features

{{ range where .Site.Pages "Params.type" "card" }} @@ -12,7 +15,10 @@ {{ end }}
+
+
+

Capabilities

{{ with .GetPage "info" }} @@ -24,25 +30,24 @@
+
- -
-

This open source project has been originally created by

+
+

This open source project has been originally created by

EDB logo + href="https://www.enterprisedb.com/products/cloud-native-postgresql-kubernetes-ha-clusters-k8s-containers-scalable" + aria-label="EDB - originally created CloudNativePG">EDB
-

100%

-

Open Source

+

100%

+

Open Source

CloudNativePG is 100% open source and community-driven. All components are available under the Apache 2 + href="https://github.com/cloudnative-pg/cloudnative-pg/blob/main/LICENSE" class="text-white underline">Apache 2 license - on GitHub.

-
- + on GitHub.

{{ end }}