InfoPanel: make snippets keyboard-navigable and autoselected

Code snippets can now be navigated to be keyboard. Additionally,
focusing this way or by single-clicking will select the entire snippet
contents by default, then after a 50ms delay, allow for normal text
selection. This is a better experience for copying, especially on
mobile.

src/components/IconGrid/IconGrid.css

@@ -87,10 +87,27 @@
 .snippet {
   margin-bottom: 24px;
 }
+
 .snippet pre {
   text-overflow: ellipsis;
   color: black;
+  user-select: all;
+  -moz-user-select: all;
+  -webkit-user-select: all;
 }
+
+.snippet pre:focus {
+  animation: select 50ms step-end forwards;
+}
+
+@keyframes select {
+  to {
+    user-select: text;
+    -moz-user-select: text;
+    -webkit-user-select: text;
+  }
+}
+
 .snippet button {
   background-color: transparent;
   margin: 0;

src/components/IconGrid/InfoPanel.tsx

@@ -101,7 +101,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
       <div className="icon-usage">
         <div className="snippet">
           HTML/CSS
-          <pre>
+          <pre tabIndex={0}>
             {snippets.html}
             <button
               title="Copy snippet"
@@ -117,7 +117,7 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
         </div>
         <div className="snippet">
           React
-          <pre>
+          <pre tabIndex={0}>
             {snippets.react}
             <button
               title="Copy snippet"
@@ -154,10 +154,12 @@ const InfoPanel: React.FC<InfoPanelProps> = (props) => {
       </div>
       <X
         className="close-icon"
+        tabIndex={0}
         color="currentColor"
         size={32}
         weight="fill"
         onClick={() => setOpen(false)}
+        onKeyDown={(e) => {e.key === "Enter" && setOpen(false)}}
       />
     </motion.section>
   );