Add focus-visible styles for libs-card and escape visible card text

Author: pusewicz

assets/css/redesign.css

@@ -1381,6 +1381,14 @@ ul {
   background: var(--color-bg-warm);
 }
 
+.libs-card:focus-visible {
+  outline: 2px solid var(--color-red);
+  outline-offset: -2px;
+  background: var(--color-bg-warm);
+  z-index: 1;
+  position: relative;
+}
+
 .libs-card[hidden] {
   display: none;
 }
@@ -1466,6 +1474,11 @@ ul {
   opacity: 0.75;
 }
 
+.libs-footer__link:focus-visible {
+  outline: 2px solid var(--color-red);
+  outline-offset: 2px;
+}
+
 /* ------------------------------------------------------------
    Libraries — No Results
    ------------------------------------------------------------ */

libraries/index.html

@@ -64,10 +64,10 @@ <h1 class="page-header__heading">mrbgems</h1>
           data-description="{{ mgem.description | downcase | xml_escape }}"
         >
           <div class="libs-card__header">
-            <span class="libs-card__name">{{ mgem.name }}</span>
-            <span class="libs-card__author">{{ mgem_author }}</span>
+            <span class="libs-card__name">{{ mgem.name | xml_escape }}</span>
+            <span class="libs-card__author">{{ mgem_author | xml_escape }}</span>
           </div>
-          <p class="libs-card__description">{{ mgem.description }}</p>
+          <p class="libs-card__description">{{ mgem.description | xml_escape }}</p>
         </a>
         {% assign row_index = row_index | plus: 1 %}
         {% assign mod_end = row_index | modulo: row_size %}