From 006e6ab5afef6d49bc0b66c654985a15c709fb65 Mon Sep 17 00:00:00 2001
From: Christopher Gurnee <chris@gurneeconsulting.net>
Date: Tue, 15 Mar 2022 19:17:34 +0000
Subject: [PATCH] Make collapse and edited links keyboard navigable

---
 src/pages/thread/Comment.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/thread/Comment.js b/src/pages/thread/Comment.js
index 9273583..351b89c 100644
--- a/src/pages/thread/Comment.js
+++ b/src/pages/thread/Comment.js
@@ -42,7 +42,10 @@ const Comment = (props) => {
   return (
     <div id={props.id} className={commentStyle}>
       <div className={collapsed ? 'comment-head comment-collapsed' : 'comment-head'}>
-        <a onClick={() => setCollapsed(!collapsed)} className='comment-collapse'>[{collapsed ? '+' : '\u2212'}]</a>
+        <a onClick=  {() => setCollapsed(!collapsed)}
+           onKeyDown={e => e.key == "Enter" && setCollapsed(!collapsed)}
+           tabIndex= {0}
+           className='comment-collapse'>[{collapsed ? '+' : '\u2212'}]</a>
         <span className='space' />
         <a
           href={props.author !== '[deleted]' ? `https://www.reddit.com/user/${props.author}` : undefined}
@@ -66,9 +69,11 @@ const Comment = (props) => {
           <a href={`https://www.reddit.com${permalink}`}>reddit</a>
           <a href={`https://reveddit.com${permalink}`}>reveddit</a>
           {props.hasOwnProperty('edited_body') &&
-            <a onClick={() => setShowEdited(!showEdited)} title={
-              showEdited ? 'The most recent version is shown; click to show the earliest archived' : 'The earliest archived version is shown; click to show the most recent'
-            }>*edited</a>}
+            <a onClick=  {() => setShowEdited(!showEdited)}
+               onKeyDown={e => e.key == "Enter" && setShowEdited(!showEdited)}
+               tabIndex= {0}
+               title=    {showEdited ? 'The most recent version is shown; click to show the earliest archived' : 'The earliest archived version is shown; click to show the most recent'}
+            >*edited</a>}
         </div>
         <div>
           {props.replies.map(comment => (