javascript and css proposed changes

Author: acharraggi

docs/source/_static/css/ftc-rtd.css

@@ -14,7 +14,7 @@ html[data-theme='dark'] .card, .btn-block {
 .center {text-align: center;}
 
 .color-strip {
-	height: 10px;
+	height: 20px;
 	margin :0;
 	padding: 0;
 	position: relative;
@@ -62,6 +62,7 @@ html[data-theme='dark'] .card, .btn-block {
 	width: auto;
 	overflow-y: auto;
 	margin-top: 10px;
+	padding-top: 25px;
 }
 
 .wy-nav-side {
@@ -145,3 +146,52 @@ div.ethical-sidebar, div.ethical-footer {
 .sphinx-tab img {
 	margin-bottom: 24px;
 }
+
+/* ADA compliance CSS */
+footer a, a.external {  /* increase link text color contrast to dark blue, add underlines for links in the body (not in the sidebar) */
+  color: #0000EE /* blue #003974 */ !important;
+  text-decoration-line: underline !important;
+  text-decoration-color: #0000EE !important;
+  /*text-decoration-thickness: .125em !important;*/
+  text-underline-offset: 0.2em !important;
+}
+footer a:visited, a.external:visited {  /* visited is an important navigation feature for links */
+  color: #551A8B /* purple #003974 */ !important;
+  text-decoration-color: #551A8B !important;
+}
+footer a:focus, a.external:focus {
+    outline: 2px solid #d71ef7;
+}
+footer a:hover, a.external:hover {  
+  font-weight: bold;
+}
+footer a:active, a.external:active {  
+  color: #FF0000 !important;
+}
+/* I noticed that we don't hightlight focus very well on the page.
+   After a reload no focus is visible, if you start tabbbing there's some small indications of focus.
+   Focus starts in the search the docs input field, but there's not indication of focus and it's not visible. */
+   
+
+p.admonition-title {  /* increase background contrast to dark blue */
+  background: #003974 !important;
+}
+footer {	/* increase text contrast, override grey*/
+  color: black !important;
+}
+
+/* ADA Skip navigation */
+.skip-nav {
+  position: absolute;
+  left: 0px;  /* was -9999px */
+  opacity: 0;
+  z-index: 1000;
+  background: white;
+  /*color: white;*/
+}
+.skip-nav:focus {
+  /*left: 0;*/
+  /*transform: translateX(-50%);*/
+  opacity: 1;
+}
+

docs/source/_static/js/external-links-new-tab.js

@@ -1,4 +1,16 @@
 $(document).ready(function () {
     $('a.external').attr('target', '_blank');
     $('a.external').attr('rel', 'noopener');
+    emdash_loc = document.title.indexOf('\u2014');
+    if (emdash_loc > 1) { /* ADA compliance, clean up title content. locate the emdash that separates the content from cruft */
+    	document.title = document.title.substring(0, emdash_loc-1);
+    }
+    /* skip to main content handling*/
+    document.body.insertAdjacentHTML('afterbegin', '<a id="skip-link" class="skip-nav" tabindex="1" href="#main">Skip to main content</a>');
+    document.querySelector("h1").insertAdjacentHTML('beforebegin', '<section id="main">');
+    document.getElementById('skip-link').focus();
+    
+    /* this didn't work as hoped, hitting tab went to the search box, not tabindex 1 
+    	Test again with Jaws, maybe it will 'find' the first tabindex from the top of the page */
+    document.getElementById('skip-link').blur();	/* we set focus away from the sidebar, then blur it */
 });

docs/source/_templates/footer.html

@@ -23,19 +23,19 @@
         {%- if hasdoc('copyright') %}
         {%- trans path=pathto('copyright'), copyright=copyright|e %}&#169; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
         {%- else %}
-        &#169; 2023 <i>{%- trans copyright=copyright|e %}{{ copyright }}{% endtrans %}</i>
+        &#169; 2024 <i>{%- trans copyright=copyright|e %}{{ copyright }}{% endtrans %}</i>
         {%- endif %}
         {%- endif %}
       </div>
 
       <div>
-        <a href="https://www.firstinspires.org/about/privacy-policy">Privacy Policy</a>
+        <p style="margin-top: 0.5em;"><a class="external" href="https://www.firstinspires.org/about/privacy-policy">Privacy Policy</a></p>
       </div>
       <div>
-        <a href="{{ pathto('tos/tos') }}">Terms of Service</a>
+        <a class="external" href="{{ pathto('tos/tos') }}">Terms of Service</a>
       </div>
       <div>
-        <a href="https://www.pavesuite.com/FIRST/PublicPortal/HomePage">Report an Incident</a>
+        <p style="margin-top: 0.5em;"><a class="external" href="https://www.pavesuite.com/FIRST/PublicPortal/HomePage">Report an Incident</a></p>
       </div>
 
       <div>