Added sr-only and sr-only-focusable css classes to app.css

The key difference between .sr-only and .sr-only-focusable is:
• .sr-only stays hidden all the time
• .sr-only-focusable becomes visible when focused with keyboard navigation (Tab key)
You typically use .sr-only-focusable together with .sr-only for navigation elements that should be available to keyboard users but hidden from view otherwise.

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;