Merge pull request #151 from recogito/revised-selection-behavior

Revised Selection Behavior

Author: rsimon

packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.css

@@ -3,7 +3,7 @@
  * or the screen reader users as the popup behavior hint
  * Inspired by https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
  */
-.popup-close-message {
+.r6o-popup-sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
@@ -17,8 +17,8 @@
   white-space: nowrap;
 }
 
-.popup-close-message:focus,
-.popup-close-message:active {
+.r6o-popup-sr-only:focus,
+.r6o-popup-sr-only:active {
   clip: auto;
   -webkit-clip-path: none;
   clip-path: none;

packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx

@@ -1,4 +1,7 @@
-import React, { PointerEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import { PointerEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { useAnnotator, useSelection } from '@annotorious/react';
+import type { TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
+import { isMobile } from './isMobile';
 import {
   autoUpdate,
   flip,
@@ -13,13 +16,12 @@ import {
   useRole
 } from '@floating-ui/react';
 
-import { useAnnotator, useSelection } from '@annotorious/react';
-import type { TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
-
 import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {
 
+  ariaCloseWarning?: string;
+
   popup(props: TextAnnotationPopupContentProps): ReactNode;
 
 }
@@ -39,24 +41,18 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
   const r = useAnnotator<TextAnnotator>();
 
   const { selected, event } = useSelection<TextAnnotation>();
+
   const annotation = selected[0]?.annotation;
 
   const [isOpen, setOpen] = useState(selected?.length > 0);
 
-  const handleClose = () => {
-    r?.cancelSelected();
-  };
-
   const { refs, floatingStyles, update, context } = useFloating({
-    placement: 'top',
+    placement: isMobile() ? 'bottom' : 'top',
     open: isOpen,
     onOpenChange: (open, _event, reason) => {
-      setOpen(open);
-
-      if (!open) {
-        if (reason === 'escape-key' || reason === 'focus-out') {
-          r?.cancelSelected();
-        }
+      if (!open && (reason === 'escape-key' || reason === 'focus-out')) {
+        setOpen(open);
+        r?.cancelSelected();
       }
     },
     middleware: [
@@ -69,48 +65,35 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
   });
 
   const dismiss = useDismiss(context);
+
   const role = useRole(context, { role: 'dialog' });
-  const { getFloatingProps } = useInteractions([dismiss, role]);
 
-  const selectedKey = selected.map(a => a.annotation.id).join('-');
-  useEffect(() => {
-    // Ignore all selection changes except those accompanied by a user event.
-    if (selected.length > 0 && event) {
-      setOpen(event.type === 'pointerup' || event.type === 'keydown');
-    }
-  }, [selectedKey, event]);
+  const { getFloatingProps } = useInteractions([dismiss, role]);
 
   useEffect(() => {
-    // Close the popup if the selection is cleared
-    if (selected.length === 0 && isOpen) {
-      setOpen(false);
-    }
-  }, [isOpen, selectedKey]);
+    setOpen(selected.length > 0);
+  }, [selected.map(a => a.annotation.id).join('-')]);
 
   useEffect(() => {
     if (isOpen && annotation) {
+      // Extra precaution - shouldn't normally happen
+      if (!annotation.target.selector || annotation.target.selector.length < 1) return;
+
       const {
         target: {
           selector: [{ range }]
         }
       } = annotation;
 
       refs.setPositionReference({
-        getBoundingClientRect: range.getBoundingClientRect.bind(range),
-        getClientRects: range.getClientRects.bind(range)
+        getBoundingClientRect: () => range.getBoundingClientRect(),
+        getClientRects: () => range.getClientRects()
       });
     } else {
-      // Don't leave the reference depending on the previously selected annotation
       refs.setPositionReference(null);
     }
   }, [isOpen, annotation, refs]);
 
-  // Prevent text-annotator from handling the irrelevant events triggered from the popup
-  const getStopEventsPropagationProps = useCallback(
-    () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),
-    []
-  );
-
   useEffect(() => {
     const config: MutationObserverInit = { attributes: true, childList: true, subtree: true };
 
@@ -125,21 +108,27 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
     };
   }, [update]);
 
+  // Prevent text-annotator from handling the irrelevant events triggered from the popup
+  const getStopEventsPropagationProps = useCallback(
+    () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),
+    []
+  );
+
+  // Don't shift focus to the floating element if selected via keyboard or on mobile.
+  const initialFocus = useMemo(() => {
+    return (event?.type === 'keyup' || event?.type === 'contextmenu' || isMobile()) ? -1 : 0;
+  }, [event]);
+
+  const onClose = () => r?.cancelSelected();
+
   return isOpen && selected.length > 0 ? (
     <FloatingPortal>
       <FloatingFocusManager
         context={context}
         modal={false}
         closeOnFocusOut={true}
-        initialFocus={
-          /**
-           * Don't shift focus to the floating element
-           * when the selection performed with the keyboard
-           */
-          event?.type === 'keydown' ? -1 : 0
-        }
         returnFocus={false}
-      >
+        initialFocus={initialFocus}>
         <div
           className="annotation-popup text-annotation-popup not-annotatable"
           ref={refs.setFloating}
@@ -152,13 +141,12 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
             event
           })}
 
-          {/* It lets keyboard/sr users to know that the dialog closes when they focus out of it */}
-          <button className="popup-close-message" onClick={handleClose}>
-            This dialog closes when you leave it.
+          <button className="r6o-popup-sr-only" aria-live="assertive" onClick={onClose}>
+            {props.ariaCloseWarning || 'Click or leave this dialog to close it.'}
           </button>
         </div>
       </FloatingFocusManager>
     </FloatingPortal>
   ) : null;
 
-};
+}

packages/text-annotator-react/src/TextAnnotatorPopup/isMobile.ts

@@ -0,0 +1,17 @@
+// https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system
+export const isMobile = () => {
+  // @ts-ignore
+  var userAgent: string = navigator.userAgent || navigator.vendor || window.opera;
+
+  if (/android/i.test(userAgent)) 
+    return true;
+
+  // @ts-ignore
+  // Note: as of recently, this NO LONGER DETECTS FIREFOX ON iOS!
+  // This means FF/iOS will behave like on the desktop, and loose
+  // selection handlebars after the popup opens.
+  if (/iPad|iPhone/.test(userAgent) && !window.MSStream)
+    return true;
+
+  return false;
+}

packages/text-annotator-react/test/App.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect } from 'react';
-import { AnnotationBody, Annotorious, useAnnotationStore, useAnnotator, useSelection } from '@annotorious/react';
-import { TextAnnotator, TextAnnotatorPopup, type TextAnnotationPopupContentProps } from '../src';
+import { AnnotationBody, Annotorious, useAnnotationStore, useAnnotator } from '@annotorious/react';
+import { TextAnnotationPopupContentProps, TextAnnotator, TextAnnotatorPopup } from '../src';
 import { W3CTextFormat, type TextAnnotation, type TextAnnotator as RecogitoTextAnnotator } from '@recogito/text-annotator';
 
 const TestPopup: FC<TextAnnotationPopupContentProps> = (props) => {