[Misc] modular UI panel wcag styling (#9214)

(master → master)

Author: webviewer-ui

assets/icons/digital_signature_error.svg

@@ -2,12 +2,27 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import core from 'core';
+import PropTypes from 'prop-types';
 
-import './Bookmark.scss';
 import Button from '../Button';
 import DataElementWrapper from '../DataElementWrapper';
-import BookmarkOutlineContextMenuPopup from '../BookmarkOutlineContextMenuPopup';
+import MoreOptionsContextMenuPopup from '../MoreOptionsContextMenuPopup';
 import Choice from 'components/Choice';
+import '../../constants/bookmarksOutlinesShared.scss';
+
+const propTypes = {
+  text: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  defaultLabel: PropTypes.string,
+  pageIndex: PropTypes.number.isRequired,
+  isAdding: PropTypes.bool,
+  isMultiSelectionMode: PropTypes.bool,
+  setSelected: PropTypes.func,
+  onSave: PropTypes.func.isRequired,
+  onRemove: PropTypes.func,
+  onCancel: PropTypes.func,
+  panelSelector: PropTypes.string,
+};
 
 const Bookmark = ({
   text,
@@ -20,6 +35,7 @@ const Bookmark = ({
   onSave,
   onRemove,
   onCancel,
+  panelSelector,
 }) => {
   const [t] = useTranslation();
 
@@ -30,19 +46,26 @@ const Bookmark = ({
   const [clearSingleClick, setClearSingleClick] = useState(undefined);
   const inputRef = useRef();
 
+  const isRenameButtonDisabled = () => {
+    return !bookmarkText || text === bookmarkText;
+  };
+
   const handleKeyDown = (e) => {
-    if (e.keyCode === 13) {
-      onSaveBookmark();
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      if (isAdding || (isEditing && !isRenameButtonDisabled())) {
+        onSaveBookmark();
+      }
     }
-    if (e.keyCode === 27) {
+    if (e.key === 'Escape') {
       onCancelBookmark();
     }
-  }
+  };
 
   const onSaveBookmark = () => {
     setIsEditing(false);
-    onSave(bookmarkText || t('message.untitled'));
-  }
+    onSave(bookmarkText.trim() === '' ? t('message.untitled') : bookmarkText);
+  };
 
   const onCancelBookmark = () => {
     setIsEditing(false);
@@ -51,6 +74,10 @@ const Bookmark = ({
     isAdding && onCancel();
   };
 
+  const setCurrentPage = (pageIndex) => {
+    core.setCurrentPage(pageIndex + 1);
+  };
+
   useEffect(() => {
     if (bookmarkText !== text) {
       setBookmarkText(text);
@@ -74,21 +101,25 @@ const Bookmark = ({
     <DataElementWrapper
       className={classNames({
         'bookmark-outline-single-container': true,
-        'adding': isAdding,
-        'editing': isEditing,
+        'editing': isAdding || isEditing,
         'default': isDefault,
-        'hover': isContextMenuOpen,
       })}
-      onClick={e => {
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          setCurrentPage(pageIndex);
+        }
+      }}
+      onClick={(e) => {
         if (isDefault && e.detail === 1) {
           setClearSingleClick(setTimeout(() => {
-            core.setCurrentPage(pageIndex + 1);
-          }, 300))
+            setCurrentPage(pageIndex);
+          }, 300));
         }
       }}
       onDoubleClick={() => {
         if (isDefault) {
-          clearTimeout(clearSingleClick)
+          clearTimeout(clearSingleClick);
         }
       }}
     >
@@ -97,8 +128,8 @@ const Bookmark = ({
           type="checkbox"
           className="bookmark-outline-checkbox"
           id={`bookmark-checkbox-${pageIndex + 1}`}
-          onClick={e => e.stopPropagation()}
-          onChange={e => setSelected(pageIndex, e.target.checked)}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setSelected(pageIndex, e.target.checked)}
         />
       }
 
@@ -112,7 +143,7 @@ const Bookmark = ({
                 className="bookmark-outline-more-button"
                 dataElement={`bookmark-more-button-${pageIndex}`}
                 img="icon-pencil-line"
-                onClick={e => {
+                onClick={(e) => {
                   e.stopPropagation();
                   setIsEditing(true);
                 }}
@@ -122,35 +153,34 @@ const Bookmark = ({
             {!isMultiSelectionMode &&
               <Button
                 className="bookmark-outline-more-button"
-                dataElement={`bookmark-more-button-${pageIndex}`}
+                dataElement={`bookmark-more-button-${panelSelector}-${pageIndex}`}
                 img="icon-tool-more"
-                onClick={e => {
+                onClick={(e) => {
                   e.stopPropagation();
                   setContextMenuOpen(true);
                 }}
-                tabIndex={-1}
+                tabIndex={0 }
               />
             }
             {isContextMenuOpen && (
-              <BookmarkOutlineContextMenuPopup
+              <MoreOptionsContextMenuPopup
                 type={'bookmark'}
-                anchorButton={`bookmark-more-button-${pageIndex}`}
+                anchorButton={`bookmark-more-button-${panelSelector}-${pageIndex}`}
+                shouldDisplayDeleteButton={true}
                 onClosePopup={() => setContextMenuOpen(false)}
-                onRenameClick={e => {
-                  e.stopPropagation();
+                onRenameClick={() => {
                   setContextMenuOpen(false);
                   setIsEditing(true);
                 }}
-                onDeleteClick={e => {
-                  e.stopPropagation();
+                onDeleteClick={() => {
                   setContextMenuOpen(false);
                   onRemove(pageIndex);
                 }}
               />
             )}
 
             <div
-              className="bookmark-outline-text"
+              className="bookmark-outline-text bookmark-text-input"
               onDoubleClick={() => setIsEditing(true)}
             >
               {text}
@@ -164,12 +194,11 @@ const Bookmark = ({
               type="text"
               name="bookmark"
               ref={inputRef}
-              className="bookmark-outline-input"
-              placeholder={t('component.bookmarkTitle')}
+              className="bookmark-outline-input bookmark-text-input"
               aria-label={t('action.name')}
               value={bookmarkText}
               onKeyDown={handleKeyDown}
-              onChange={e => setBookmarkText(e.target.value)}
+              onChange={(e) => setBookmarkText(e.target.value)}
             />
 
             <div className="bookmark-outline-editing-controls">
@@ -182,16 +211,16 @@ const Bookmark = ({
                 <Button
                   className="bookmark-outline-save-button"
                   label={t('action.add')}
-                  isSubmitType={true}
+                  isSubmitType
                   onClick={onSaveBookmark}
                 />
               }
               {isEditing &&
                 <Button
                   className="bookmark-outline-save-button"
                   label={t('action.save')}
-                  isSubmitType={true}
-                  disabled={bookmarkText === text}
+                  isSubmitType
+                  disabled={isRenameButtonDisabled()}
                   onClick={onSaveBookmark}
                 />
               }
@@ -200,7 +229,9 @@ const Bookmark = ({
         }
       </div>
     </DataElementWrapper>
-  )
-}
+  );
+};
+
+Bookmark.propTypes = propTypes;
 
 export default Bookmark;