Fix pagespeed insights accessibility issues (#153)

maltekuehl · web-flow · commit 2df4dcca208d · 2025-03-17T23:41:33.000+01:00
* Fix pagespeed insights accessibility issues

* Fix pagespeed insights accessibility issues
diff --git a/assets/main.scss b/assets/main.scss
@@ -37,7 +37,7 @@ $navbgactive: $tilebg3;
 
 $footerbg: #f0f0f0;
 $footertext: #333333;
-$footertextlight: #777777;
+$footertextlight: #555555;
 $footertextmuted: #aaaaaa;
 
 $postlinktext: #333333;
@@ -723,10 +723,6 @@ body {
                 color: $footertext;
                 text-align: left;
 
-                ul {
-                    list-style: none;
-                }
-
                 a,
                 p {
                     margin: 0.2rem 0;
@@ -917,6 +913,7 @@ body {
         .post-content {
             margin: 3rem 0;
             font-size: 1.1rem;
+            text-wrap: pretty;
             span.backticked {
                 font-size: 1.2rem;
                 line-height: 1.1rem;
@@ -1199,12 +1196,14 @@ body {
     width: 100%;
 }
 
-.team-member:hover .person-chip {
+.team-member:hover .person-chip,
+.team-member:focus-within .person-chip {
     background-color: var(--tilebg2, #e5e5e5);
     color: var(--tiletext3, #000);
 }
 
-.team-member:has(.additional-info):hover .person-chip {
+.team-member:has(.additional-info):hover .person-chip,
+.team-member:has(.additional-info):focus-within .person-chip {
     border-radius: 0.5rem 0.5rem 0 0;
 }
 
@@ -1222,7 +1221,8 @@ body {
     width: 100%;
 }
 
-.team-member:hover .additional-info {
+.team-member:hover .additional-info,
+.team-member:focus-within .additional-info {
     visibility: visible;
 }
 
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     {{ partial "head" . }}
   </head>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -2,8 +2,8 @@
   <div id="footer-content" class="container">
     <div class="row">
       <div class="col-12 col-md-6 col-lg-3">
-        <ul>
-          <h5>Pages</h5>
+        <h5>Pages</h5>
+        <ul class="list-unstyled">
           <li><a href="/packages">Packages</a></li>
           <li><a href="/learn">Learn</a></li>
           <li><a href="/people">People</a></li>
@@ -13,16 +13,16 @@ <h5>Pages</h5>
         </ul>
       </div>
       <div class="col-12 col-md-6 col-lg-3">
-        <ul>
-          <h5>Governance</h5>
+        <h5>Governance</h5>
+        <ul class="list-unstyled">
           <li><a href="/about/mission/">Mission statement</a></li>
           <li><a href="/about/code_of_conduct">Code of conduct</a></li>
           <li><a href="/about/roles">Roles</a></li>
         </ul>
       </div>
       <div class="col-12 col-md-6 col-lg-3">
-        <ul>
-          <h5>Join scverse</h5>
+        <h5>Join scverse</h5>
+        <ul class="list-unstyled">
           <li><a href="https://github.com/scverse" target="_blank">GitHub</a></li>
           <li><a href="https://discourse.scverse.org/" target="_blank">Discourse</a></li>
           <li><a href="https://scverse.zulipchat.com/" target="_blank">Zulip</a></li>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -3,6 +3,7 @@
     <div class="container-fluid">
       <a class="navbar-brand row align-items-center m-0" href="/">
         <div id="scverse-logo" class="col"></div>
+        <span class="visually-hidden">scverse</span>
         <!--{{ if ne .Section `` }}
           <span class="logo-name col m-0 px-3">scverse</span>
         {{ end }}-->
diff --git a/layouts/partials/main/packages.html b/layouts/partials/main/packages.html
@@ -11,7 +11,12 @@
                 <img src="img/icons/{{ .name }}.svg" alt="Logo for {{ .name }}" />
               </div>
               <div class="card-body package-text p-2">
-                <a href="{{ .url }}" class="stretched-link" target="_blank" onclick=""></a>
+                <a
+                  href="{{ .url }}"
+                  class="stretched-link"
+                  target="_blank"
+                  aria-label="Link to the {{ .name }} website"
+                ></a>
                 <h5 class="card-title mb-1 package-name">
                   {{ .name }}
                 </h5>
