From ab205df055bff3f2adad330e094f33785320853e Mon Sep 17 00:00:00 2001
From: David Sexton <david@rustytelephone.net>
Date: Tue, 11 Feb 2025 11:22:54 -0800
Subject: [PATCH] =?UTF-8?q?Added=20sr-only=20and=20sr-only-focusable=20css?=
 =?UTF-8?q?=20classes=20to=20app.css=20The=20key=20difference=20between=20?=
 =?UTF-8?q?.sr-only=20and=20.sr-only-focusable=20is:=20=E2=80=A2=20.sr-onl?=
 =?UTF-8?q?y=20stays=20hidden=20all=20the=20time=20=E2=80=A2=20.sr-only-fo?=
 =?UTF-8?q?cusable=20becomes=20visible=20when=20focused=20with=20keyboard?=
 =?UTF-8?q?=20navigation=20(Tab=20key)=20You=20typically=20use=20.sr-only-?=
 =?UTF-8?q?focusable=20together=20with=20.sr-only=20for=20navigation=20ele?=
 =?UTF-8?q?ments=20that=20should=20be=20available=20to=20keyboard=20users?=
 =?UTF-8?q?=20but=20hidden=20from=20view=20otherwise.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/App.css b/src/App.css
index 7c555d6..36811fe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,6 +9,39 @@
   --color-border: #ccc;
 }
 
+.sr-only {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+	-webkit-clip-path: inset(50%) !important;
+					clip-path: inset(50%) !important;  /* 2 */
+	height: 1px !important;
+	overflow: hidden !important;
+	margin: -1px !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	white-space: nowrap !important;            /* 3 */
+}
+
+/*
+	Use in conjunction with .sr-only to only display content when it's focused.
+	@note Useful for skip links 
+	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
+*/
+.sr-only-focusable:focus,
+.sr-only-focusable:active {
+	clip: auto !important;
+	-webkit-clip-path: none !important;
+					clip-path: none !important;
+	height: auto !important;
+	margin: auto !important;
+	overflow: visible !important;
+	position: static !important;
+	width: auto !important;
+	white-space: normal !important;
+}
+
 body {
   padding: 0;
   margin: 0;