Adds keyboard affordance to story viewer

stylesheets/components/StoryListItem.scss

@@ -10,6 +10,12 @@
   height: 96px;
   width: 100%;
 
+  @include keyboard-mode {
+    &:focus {
+      background: $color-gray-65;
+    }
+  }
+
   &:hover {
     background: $color-gray-65;
   }

stylesheets/components/StoryViewer.scss

@@ -40,6 +40,12 @@
     width: 24px;
 
     @include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
+
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-ultramarine;
+      }
+    }
   }
 
   &__container {
@@ -89,6 +95,11 @@
 
   &__reply {
     @include button-reset;
+    @include keyboard-mode {
+      &:focus {
+        color: $color-ultramarine;
+      }
+    }
   }
 
   &__progress {

ts/components/StoriesPane.tsx

@@ -1,6 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import FocusTrap from 'focus-trap-react';
 import Fuse from 'fuse.js';
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
@@ -82,12 +83,14 @@ export const StoriesPane = ({
   }, [searchTerm, stories]);
 
   return (
-    <>
+    <FocusTrap>
+      <div>
         <div className="Stories__pane__header">
           <button
             aria-label={i18n('back')}
             className="Stories__pane__header--back"
             onClick={onBack}
+            tabIndex={0}
             type="button"
           />
           <div className="Stories__pane__header--title">
@@ -127,6 +130,7 @@ export const StoriesPane = ({
           ))}
           {!stories.length && i18n('Stories__list-empty')}
         </div>
-    </>
+      </div>
+    </FocusTrap>
   );
 };

ts/components/StoryListItem.tsx

@@ -124,6 +124,7 @@ export const StoryListItem = ({
           }
         }}
         ref={setReferenceElement}
+        tabIndex={0}
         type="button"
       >
         <Avatar

ts/components/StoryViewer.tsx

@@ -1,6 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import FocusTrap from 'focus-trap-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSpring, animated, to } from '@react-spring/web';
 import type { BodyRangeType, LocalizerType } from '../types/Util';
@@ -197,18 +198,21 @@ export const StoryViewer = ({
   }, [navigateStories]);
 
   return (
+    <FocusTrap>
       <div className="StoryViewer">
         <div className="StoryViewer__overlay" />
         <div className="StoryViewer__content">
           <button
             aria-label={i18n('MyStories__more')}
             className="StoryViewer__more"
+            tabIndex={0}
             type="button"
           />
           <button
             aria-label={i18n('close')}
             className="StoryViewer__close-button"
             onClick={onClose}
+            tabIndex={0}
             type="button"
           />
           <div className="StoryViewer__container">
@@ -328,6 +332,7 @@ export const StoryViewer = ({
               <button
                 className="StoryViewer__reply"
                 onClick={() => setHasReplyModal(true)}
+                tabIndex={0}
                 type="button"
               >
                 {i18n('StoryViewer__reply')}
@@ -362,5 +367,6 @@ export const StoryViewer = ({
           />
         )}
       </div>
+    </FocusTrap>
   );
 };