From 19bb3bc994c2fa9a22338ed7fc2962e1b84cdc19 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Thu, 7 Apr 2022 17:11:33 -0400
Subject: [PATCH] Adds keyboard affordance to story viewer

---
 stylesheets/components/StoryListItem.scss |   6 +
 stylesheets/components/StoryViewer.scss   |  11 +
 ts/components/StoriesPane.tsx             |  90 ++++---
 ts/components/StoryListItem.tsx           |   1 +
 ts/components/StoryViewer.tsx             | 312 +++++++++++-----------
 5 files changed, 224 insertions(+), 196 deletions(-)

diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index baef66b982a2..8ab16e23c667 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/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;
   }
diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
index 36d6006df3a8..53d945e6f6b6 100644
--- a/stylesheets/components/StoryViewer.scss
+++ b/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 {
diff --git a/ts/components/StoriesPane.tsx b/ts/components/StoriesPane.tsx
index 9ef59635fc8c..e510338ff1e3 100644
--- a/ts/components/StoriesPane.tsx
+++ b/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,51 +83,54 @@ export const StoriesPane = ({
   }, [searchTerm, stories]);
 
   return (
-    <>
-      <div className="Stories__pane__header">
-        <button
-          aria-label={i18n('back')}
-          className="Stories__pane__header--back"
-          onClick={onBack}
-          type="button"
+    <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">
+            {i18n('Stories__title')}
+          </div>
+        </div>
+        <SearchInput
+          i18n={i18n}
+          moduleClassName="Stories__search"
+          onChange={event => {
+            setSearchTerm(event.target.value);
+          }}
+          placeholder={i18n('search')}
+          value={searchTerm}
         />
-        <div className="Stories__pane__header--title">
-          {i18n('Stories__title')}
+        <div
+          className={classNames('Stories__pane__list', {
+            'Stories__pane__list--empty': !stories.length,
+          })}
+        >
+          {renderedStories.map(story => (
+            <StoryListItem
+              key={getNewestStory(story).timestamp}
+              i18n={i18n}
+              onClick={() => {
+                onStoryClicked(story.conversationId);
+              }}
+              onHideStory={() => {
+                toggleHideStories(getNewestStory(story).sender.id);
+              }}
+              onGoToConversation={conversationId => {
+                openConversationInternal({ conversationId });
+              }}
+              queueStoryDownload={queueStoryDownload}
+              story={getNewestStory(story)}
+            />
+          ))}
+          {!stories.length && i18n('Stories__list-empty')}
         </div>
       </div>
-      <SearchInput
-        i18n={i18n}
-        moduleClassName="Stories__search"
-        onChange={event => {
-          setSearchTerm(event.target.value);
-        }}
-        placeholder={i18n('search')}
-        value={searchTerm}
-      />
-      <div
-        className={classNames('Stories__pane__list', {
-          'Stories__pane__list--empty': !stories.length,
-        })}
-      >
-        {renderedStories.map(story => (
-          <StoryListItem
-            key={getNewestStory(story).timestamp}
-            i18n={i18n}
-            onClick={() => {
-              onStoryClicked(story.conversationId);
-            }}
-            onHideStory={() => {
-              toggleHideStories(getNewestStory(story).sender.id);
-            }}
-            onGoToConversation={conversationId => {
-              openConversationInternal({ conversationId });
-            }}
-            queueStoryDownload={queueStoryDownload}
-            story={getNewestStory(story)}
-          />
-        ))}
-        {!stories.length && i18n('Stories__list-empty')}
-      </div>
-    </>
+    </FocusTrap>
   );
 };
diff --git a/ts/components/StoryListItem.tsx b/ts/components/StoryListItem.tsx
index 28a238e8986b..b6d219a4c21d 100644
--- a/ts/components/StoryListItem.tsx
+++ b/ts/components/StoryListItem.tsx
@@ -124,6 +124,7 @@ export const StoryListItem = ({
           }
         }}
         ref={setReferenceElement}
+        tabIndex={0}
         type="button"
       >
         <Avatar
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index 8763a181e4c9..b9e3c3349194 100644
--- a/ts/components/StoryViewer.tsx
+++ b/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,170 +198,175 @@ export const StoryViewer = ({
   }, [navigateStories]);
 
   return (
-    <div className="StoryViewer">
-      <div className="StoryViewer__overlay" />
-      <div className="StoryViewer__content">
-        <button
-          aria-label={i18n('MyStories__more')}
-          className="StoryViewer__more"
-          type="button"
-        />
-        <button
-          aria-label={i18n('close')}
-          className="StoryViewer__close-button"
-          onClick={onClose}
-          type="button"
-        />
-        <div className="StoryViewer__container">
-          <StoryImage
-            attachment={attachment}
-            i18n={i18n}
-            label={i18n('lightboxImageAlt')}
-            moduleClassName="StoryViewer__story"
-            queueStoryDownload={queueStoryDownload}
-            storyId={messageId}
+    <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"
           />
-          <div className="StoryViewer__meta">
-            <Avatar
-              acceptedMessageRequest={acceptedMessageRequest}
-              avatarPath={avatarPath}
-              badge={undefined}
-              color={getAvatarColor(color)}
-              conversationType="direct"
+          <button
+            aria-label={i18n('close')}
+            className="StoryViewer__close-button"
+            onClick={onClose}
+            tabIndex={0}
+            type="button"
+          />
+          <div className="StoryViewer__container">
+            <StoryImage
+              attachment={attachment}
               i18n={i18n}
-              isMe={Boolean(isMe)}
-              name={name}
-              profileName={profileName}
-              sharedGroupNames={sharedGroupNames}
-              size={AvatarSize.TWENTY_EIGHT}
-              title={title}
+              label={i18n('lightboxImageAlt')}
+              moduleClassName="StoryViewer__story"
+              queueStoryDownload={queueStoryDownload}
+              storyId={messageId}
             />
-            {group && (
+            <div className="StoryViewer__meta">
               <Avatar
-                acceptedMessageRequest={group.acceptedMessageRequest}
-                avatarPath={group.avatarPath}
+                acceptedMessageRequest={acceptedMessageRequest}
+                avatarPath={avatarPath}
                 badge={undefined}
-                className="StoryViewer__meta--group-avatar"
-                color={getAvatarColor(group.color)}
-                conversationType="group"
+                color={getAvatarColor(color)}
+                conversationType="direct"
                 i18n={i18n}
-                isMe={false}
-                name={group.name}
-                profileName={group.profileName}
-                sharedGroupNames={group.sharedGroupNames}
+                isMe={Boolean(isMe)}
+                name={name}
+                profileName={profileName}
+                sharedGroupNames={sharedGroupNames}
                 size={AvatarSize.TWENTY_EIGHT}
-                title={group.title}
+                title={title}
               />
-            )}
-            <div className="StoryViewer__meta--title">
-              {group
-                ? i18n('Stories__from-to-group', {
-                    name: title,
-                    group: group.title,
-                  })
-                : title}
-            </div>
-            <MessageTimestamp
-              i18n={i18n}
-              module="StoryViewer__meta--timestamp"
-              timestamp={timestamp}
-            />
-            <div className="StoryViewer__progress">
-              {stories.map((story, index) => (
-                <div
-                  className="StoryViewer__progress--container"
-                  key={story.messageId}
-                >
-                  {currentStoryIndex === index ? (
-                    <animated.div
-                      className="StoryViewer__progress--bar"
-                      style={{
-                        width: to([styles.width], width => `${width}%`),
-                      }}
-                    />
-                  ) : (
-                    <div
-                      className="StoryViewer__progress--bar"
-                      style={{
-                        width: currentStoryIndex < index ? '0%' : '100%',
-                      }}
-                    />
-                  )}
-                </div>
-              ))}
+              {group && (
+                <Avatar
+                  acceptedMessageRequest={group.acceptedMessageRequest}
+                  avatarPath={group.avatarPath}
+                  badge={undefined}
+                  className="StoryViewer__meta--group-avatar"
+                  color={getAvatarColor(group.color)}
+                  conversationType="group"
+                  i18n={i18n}
+                  isMe={false}
+                  name={group.name}
+                  profileName={group.profileName}
+                  sharedGroupNames={group.sharedGroupNames}
+                  size={AvatarSize.TWENTY_EIGHT}
+                  title={group.title}
+                />
+              )}
+              <div className="StoryViewer__meta--title">
+                {group
+                  ? i18n('Stories__from-to-group', {
+                      name: title,
+                      group: group.title,
+                    })
+                  : title}
+              </div>
+              <MessageTimestamp
+                i18n={i18n}
+                module="StoryViewer__meta--timestamp"
+                timestamp={timestamp}
+              />
+              <div className="StoryViewer__progress">
+                {stories.map((story, index) => (
+                  <div
+                    className="StoryViewer__progress--container"
+                    key={story.messageId}
+                  >
+                    {currentStoryIndex === index ? (
+                      <animated.div
+                        className="StoryViewer__progress--bar"
+                        style={{
+                          width: to([styles.width], width => `${width}%`),
+                        }}
+                      />
+                    ) : (
+                      <div
+                        className="StoryViewer__progress--bar"
+                        style={{
+                          width: currentStoryIndex < index ? '0%' : '100%',
+                        }}
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
+          <div className="StoryViewer__actions">
+            {isMe ? (
+              <>
+                {views &&
+                  (views === 1 ? (
+                    <Intl
+                      i18n={i18n}
+                      id="MyStories__views--singular"
+                      components={[<strong>{views}</strong>]}
+                    />
+                  ) : (
+                    <Intl
+                      i18n={i18n}
+                      id="MyStories__views--plural"
+                      components={[<strong>{views}</strong>]}
+                    />
+                  ))}
+                {views && replies && ' '}
+                {replies &&
+                  (replies === 1 ? (
+                    <Intl
+                      i18n={i18n}
+                      id="MyStories__replies--singular"
+                      components={[<strong>{replies}</strong>]}
+                    />
+                  ) : (
+                    <Intl
+                      i18n={i18n}
+                      id="MyStories__replies--plural"
+                      components={[<strong>{replies}</strong>]}
+                    />
+                  ))}
+              </>
+            ) : (
+              <button
+                className="StoryViewer__reply"
+                onClick={() => setHasReplyModal(true)}
+                tabIndex={0}
+                type="button"
+              >
+                {i18n('StoryViewer__reply')}
+              </button>
+            )}
+          </div>
         </div>
-        <div className="StoryViewer__actions">
-          {isMe ? (
-            <>
-              {views &&
-                (views === 1 ? (
-                  <Intl
-                    i18n={i18n}
-                    id="MyStories__views--singular"
-                    components={[<strong>{views}</strong>]}
-                  />
-                ) : (
-                  <Intl
-                    i18n={i18n}
-                    id="MyStories__views--plural"
-                    components={[<strong>{views}</strong>]}
-                  />
-                ))}
-              {views && replies && ' '}
-              {replies &&
-                (replies === 1 ? (
-                  <Intl
-                    i18n={i18n}
-                    id="MyStories__replies--singular"
-                    components={[<strong>{replies}</strong>]}
-                  />
-                ) : (
-                  <Intl
-                    i18n={i18n}
-                    id="MyStories__replies--plural"
-                    components={[<strong>{replies}</strong>]}
-                  />
-                ))}
-            </>
-          ) : (
-            <button
-              className="StoryViewer__reply"
-              onClick={() => setHasReplyModal(true)}
-              type="button"
-            >
-              {i18n('StoryViewer__reply')}
-            </button>
-          )}
-        </div>
+        {hasReplyModal && (
+          <StoryViewsNRepliesModal
+            authorTitle={title}
+            getPreferredBadge={getPreferredBadge}
+            i18n={i18n}
+            isMyStory={isMe}
+            onClose={() => setHasReplyModal(false)}
+            onReact={emoji => {
+              onReactToStory(emoji, visibleStory);
+            }}
+            onReply={(message, mentions, replyTimestamp) => {
+              setHasReplyModal(false);
+              onReplyToStory(message, mentions, replyTimestamp, visibleStory);
+            }}
+            onSetSkinTone={onSetSkinTone}
+            onTextTooLong={onTextTooLong}
+            onUseEmoji={onUseEmoji}
+            preferredReactionEmoji={preferredReactionEmoji}
+            recentEmojis={recentEmojis}
+            renderEmojiPicker={renderEmojiPicker}
+            replies={[]}
+            skinTone={skinTone}
+            storyPreviewAttachment={attachment}
+            views={[]}
+          />
+        )}
       </div>
-      {hasReplyModal && (
-        <StoryViewsNRepliesModal
-          authorTitle={title}
-          getPreferredBadge={getPreferredBadge}
-          i18n={i18n}
-          isMyStory={isMe}
-          onClose={() => setHasReplyModal(false)}
-          onReact={emoji => {
-            onReactToStory(emoji, visibleStory);
-          }}
-          onReply={(message, mentions, replyTimestamp) => {
-            setHasReplyModal(false);
-            onReplyToStory(message, mentions, replyTimestamp, visibleStory);
-          }}
-          onSetSkinTone={onSetSkinTone}
-          onTextTooLong={onTextTooLong}
-          onUseEmoji={onUseEmoji}
-          preferredReactionEmoji={preferredReactionEmoji}
-          recentEmojis={recentEmojis}
-          renderEmojiPicker={renderEmojiPicker}
-          replies={[]}
-          skinTone={skinTone}
-          storyPreviewAttachment={attachment}
-          views={[]}
-        />
-      )}
-    </div>
+    </FocusTrap>
   );
 };