From 1d2bacd89912fea75bad0e00f80c18dbaf4c25d1 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Mon, 17 Aug 2020 13:06:05 -0400
Subject: [PATCH] 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  | 17 +++++++++++++++++
 src/components/IconGrid/InfoPanel.tsx |  6 ++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 7db013e..43bc749 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/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;
diff --git a/src/components/IconGrid/InfoPanel.tsx b/src/components/IconGrid/InfoPanel.tsx
index 0fc41dc..33514c0 100644
--- a/src/components/IconGrid/InfoPanel.tsx
+++ b/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>
   );