Introduce focus traps for ModalHost, add button role to DropZone

signalapp · Oct 4, 2021 · 4822933 · 4822933
1 parent adaeb81
commit 4822933
Show file tree

Hide file tree

Showing 8 changed files with 358 additions and 281 deletions.
diff --git a/ACKNOWLEDGMENTS.md b/ACKNOWLEDGMENTS.md
@@ -1003,6 +1003,30 @@ Signal Desktop makes use of the following open source projects.
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
+## focus-trap-react
+
+    The MIT License (MIT)
+
+    Copyright (c) 2015 David Clark
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
 ## form-data
 
     Copyright (c) 2012 Felix Geisendörfer (felix@debuggable.com) and contributors

diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "fast-glob": "3.2.1",
     "filesize": "3.6.1",
     "firstline": "1.2.1",
+    "focus-trap-react": "8.8.1",
     "form-data": "3.0.0",
     "fs-extra": "5.0.0",
     "fuse.js": "3.4.4",

diff --git a/sticker-creator/elements/DropZone.tsx b/sticker-creator/elements/DropZone.tsx
@@ -47,7 +47,10 @@ export const DropZone: React.ComponentType<Props> = props => {
   }, [isDragActive, onDragActive]);
 
   return (
-    <div {...getRootProps({ className: getClassName(props, isDragActive) })}>
+    <div
+      {...getRootProps({ className: getClassName(props, isDragActive) })}
+      role="button"
+    >
       <input {...getInputProps()} />
       <svg viewBox="0 0 36 36" width="36px" height="36px">
         <path d="M32 17.25H18.75V4h-1.5v13.25H4v1.5h13.25V32h1.5V18.75H32v-1.5z" />

diff --git a/ts/components/ModalHost.tsx b/ts/components/ModalHost.tsx
@@ -4,6 +4,8 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
+import FocusTrap from 'focus-trap-react';
+
 import { Theme, themeClassName } from '../util/theme';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
@@ -56,17 +58,19 @@ export const ModalHost = React.memo(
 
     return root
       ? createPortal(
-          <div
-            role="presentation"
-            className={classNames(
-              'module-modal-host__overlay',
-              theme ? themeClassName(theme) : undefined
-            )}
-            onMouseDown={noMouseClose ? undefined : handleMouseDown}
-            onMouseUp={noMouseClose ? undefined : handleMouseUp}
-          >
-            {children}
-          </div>,
+          <FocusTrap>
+            <div
+              role="presentation"
+              className={classNames(
+                'module-modal-host__overlay',
+                theme ? themeClassName(theme) : undefined
+              )}
+              onMouseDown={noMouseClose ? undefined : handleMouseDown}
+              onMouseUp={noMouseClose ? undefined : handleMouseUp}
+            >
+              {children}
+            </div>
+          </FocusTrap>,
           root
         )
       : null;

diff --git a/ts/components/emoji/EmojiPicker.tsx b/ts/components/emoji/EmojiPicker.tsx
@@ -18,6 +18,8 @@ import {
   last,
   zipObject,
 } from 'lodash';
+import FocusTrap from 'focus-trap-react';
+
 import { Emoji } from './Emoji';
 import { dataByCategory, search } from './lib';
 import { LocalizerType } from '../../types/Util';
@@ -301,124 +303,126 @@ export const EmojiPicker = React.memo(
       );
 
       return (
-        <div className="module-emoji-picker" ref={ref} style={style}>
-          <header className="module-emoji-picker__header">
-            <button
-              type="button"
-              onClick={handleToggleSearch}
-              title={i18n('EmojiPicker--search-placeholder')}
-              className={classNames(
-                'module-emoji-picker__button',
-                'module-emoji-picker__button--icon',
-                searchMode
-                  ? 'module-emoji-picker__button--icon--close'
-                  : 'module-emoji-picker__button--icon--search'
+        <FocusTrap>
+          <div className="module-emoji-picker" ref={ref} style={style}>
+            <header className="module-emoji-picker__header">
+              <button
+                type="button"
+                onClick={handleToggleSearch}
+                title={i18n('EmojiPicker--search-placeholder')}
+                className={classNames(
+                  'module-emoji-picker__button',
+                  'module-emoji-picker__button--icon',
+                  searchMode
+                    ? 'module-emoji-picker__button--icon--close'
+                    : 'module-emoji-picker__button--icon--search'
+                )}
+                aria-label={i18n('EmojiPicker--search-placeholder')}
+              />
+              {searchMode ? (
+                <div className="module-emoji-picker__header__search-field">
+                  <input
+                    ref={focusOnRender}
+                    className="module-emoji-picker__header__search-field__input"
+                    placeholder={i18n('EmojiPicker--search-placeholder')}
+                    onChange={handleSearchChange}
+                  />
+                </div>
+              ) : (
+                categories.map(cat =>
+                  cat === 'recents' && firstRecent.length === 0 ? null : (
+                    <button
+                      type="button"
+                      key={cat}
+                      data-category={cat}
+                      title={cat}
+                      onClick={handleSelectCategory}
+                      className={classNames(
+                        'module-emoji-picker__button',
+                        'module-emoji-picker__button--icon',
+                        `module-emoji-picker__button--icon--${cat}`,
+                        selectedCategory === cat
+                          ? 'module-emoji-picker__button--selected'
+                          : null
+                      )}
+                      aria-label={i18n(`EmojiPicker__button--${cat}`)}
+                    />
+                  )
+                )
               )}
-              aria-label={i18n('EmojiPicker--search-placeholder')}
-            />
-            {searchMode ? (
-              <div className="module-emoji-picker__header__search-field">
-                <input
-                  ref={focusOnRender}
-                  className="module-emoji-picker__header__search-field__input"
-                  placeholder={i18n('EmojiPicker--search-placeholder')}
-                  onChange={handleSearchChange}
-                />
+            </header>
+            {emojiGrid.length > 0 ? (
+              <div>
+                <AutoSizer>
+                  {({ width, height }) => (
+                    <Grid
+                      key={searchText}
+                      className="module-emoji-picker__body"
+                      width={width}
+                      height={height}
+                      columnCount={COL_COUNT}
+                      columnWidth={38}
+                      rowHeight={getRowHeight}
+                      rowCount={emojiGrid.length}
+                      cellRenderer={cellRenderer}
+                      scrollToRow={scrollToRow}
+                      scrollToAlignment="start"
+                      onSectionRendered={onSectionRendered}
+                    />
+                  )}
+                </AutoSizer>
               </div>
             ) : (
-              categories.map(cat =>
-                cat === 'recents' && firstRecent.length === 0 ? null : (
+              <div
+                className={classNames(
+                  'module-emoji-picker__body',
+                  'module-emoji-picker__body--empty'
+                )}
+              >
+                {i18n('EmojiPicker--empty')}
+                <Emoji
+                  shortName="slightly_frowning_face"
+                  size={16}
+                  style={{ marginLeft: '4px' }}
+                />
+              </div>
+            )}
+            <footer className="module-emoji-picker__footer">
+              {Boolean(onClickSettings) && (
+                <button
+                  aria-label={i18n('CustomizingPreferredReactions__title')}
+                  className="module-emoji-picker__button module-emoji-picker__button--footer module-emoji-picker__button--settings"
+                  onClick={onClickSettings}
+                  title={i18n('CustomizingPreferredReactions__title')}
+                  type="button"
+                />
+              )}
+              <div className="module-emoji-picker__footer__skin-tones">
+                {[0, 1, 2, 3, 4, 5].map(tone => (
                   <button
                     type="button"
-                    key={cat}
-                    data-category={cat}
-                    title={cat}
-                    onClick={handleSelectCategory}
+                    key={tone}
+                    data-tone={tone}
+                    onClick={handlePickTone}
+                    title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
                     className={classNames(
                       'module-emoji-picker__button',
-                      'module-emoji-picker__button--icon',
-                      `module-emoji-picker__button--icon--${cat}`,
-                      selectedCategory === cat
+                      'module-emoji-picker__button--footer',
+                      selectedTone === tone
                         ? 'module-emoji-picker__button--selected'
                         : null
                     )}
-                    aria-label={i18n(`EmojiPicker__button--${cat}`)}
-                  />
-                )
-              )
-            )}
-          </header>
-          {emojiGrid.length > 0 ? (
-            <div>
-              <AutoSizer>
-                {({ width, height }) => (
-                  <Grid
-                    key={searchText}
-                    className="module-emoji-picker__body"
-                    width={width}
-                    height={height}
-                    columnCount={COL_COUNT}
-                    columnWidth={38}
-                    rowHeight={getRowHeight}
-                    rowCount={emojiGrid.length}
-                    cellRenderer={cellRenderer}
-                    scrollToRow={scrollToRow}
-                    scrollToAlignment="start"
-                    onSectionRendered={onSectionRendered}
-                  />
-                )}
-              </AutoSizer>
-            </div>
-          ) : (
-            <div
-              className={classNames(
-                'module-emoji-picker__body',
-                'module-emoji-picker__body--empty'
+                  >
+                    <Emoji shortName="hand" skinTone={tone} size={20} />
+                  </button>
+                ))}
+              </div>
+              {Boolean(onClickSettings) && (
+                <div className="module-emoji-picker__footer__settings-spacer" />
               )}
-            >
-              {i18n('EmojiPicker--empty')}
-              <Emoji
-                shortName="slightly_frowning_face"
-                size={16}
-                style={{ marginLeft: '4px' }}
-              />
-            </div>
-          )}
-          <footer className="module-emoji-picker__footer">
-            {Boolean(onClickSettings) && (
-              <button
-                aria-label={i18n('CustomizingPreferredReactions__title')}
-                className="module-emoji-picker__button module-emoji-picker__button--footer module-emoji-picker__button--settings"
-                onClick={onClickSettings}
-                title={i18n('CustomizingPreferredReactions__title')}
-                type="button"
-              />
-            )}
-            <div className="module-emoji-picker__footer__skin-tones">
-              {[0, 1, 2, 3, 4, 5].map(tone => (
-                <button
-                  type="button"
-                  key={tone}
-                  data-tone={tone}
-                  onClick={handlePickTone}
-                  title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
-                  className={classNames(
-                    'module-emoji-picker__button',
-                    'module-emoji-picker__button--footer',
-                    selectedTone === tone
-                      ? 'module-emoji-picker__button--selected'
-                      : null
-                  )}
-                >
-                  <Emoji shortName="hand" skinTone={tone} size={20} />
-                </button>
-              ))}
-            </div>
-            {Boolean(onClickSettings) && (
-              <div className="module-emoji-picker__footer__settings-spacer" />
-            )}
-          </footer>
-        </div>
+            </footer>
+          </div>
+        </FocusTrap>
       );
     }
   )