Small fixes for LeftPaneDialog

signalapp · Oct 5, 2021 · 4d180a2 · 4d180a2
1 parent 87ea957
commit 4d180a2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
@@ -11,8 +11,6 @@
 }
 
 .LeftPaneDialog {
-  @include button-reset;
-
   align-items: center;
   background: $color-ultramarine;
   color: $color-white;
@@ -23,6 +21,10 @@
   user-select: none;
   cursor: inherit;
 
+  &--clickable {
+    cursor: pointer;
+  }
+
   &__container {
     display: flex;
     align-items: center;

diff --git a/ts/components/LeftPaneDialog.tsx b/ts/components/LeftPaneDialog.tsx
@@ -59,6 +59,17 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
     onClick?.();
   };
 
+  const onKeyDownWrap = (e: React.KeyboardEvent) => {
+    if (e.key !== 'Enter' && e.key !== ' ') {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    onClick?.();
+  };
+
   const onCloseWrap = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -109,6 +120,7 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
   const className = classNames([
     BASE_CLASS_NAME,
     type === undefined ? undefined : `${BASE_CLASS_NAME}--${type}`,
+    onClick === undefined ? undefined : `${BASE_CLASS_NAME}--clickable`,
   ]);
 
   const content = (
@@ -128,16 +140,17 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
 
   if (onClick) {
     return (
-      <button
+      <div
         className={className}
-        type="button"
+        role="button"
         onClick={onClickWrap}
+        onKeyDown={onKeyDownWrap}
         aria-label={clickLabel}
         title={hoverText}
         tabIndex={0}
       >
         {content}
-      </button>
+      </div>
     );
   }