Merge branch 'master' into STCOM-1395

folio-org · Jan 7, 2025 · 8266b0e · 8266b0e
2 parents 977310d + f7e2775
commit 8266b0e
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,8 @@
 * ExportCSV - fix usage within `<Modal>`s by rendering the download link to the `div#OverlayContainer`. Refs STCOM-1387.
 * `<MenuSection>` should default its heading/label tag to `H3` instead of `H1`. Refs STCOM-1392.
 * `<Datepicker>` fix for `<Calendar>` tabIndex when changing the year. Refs STCOM-1395.
+* `<Tooltip>` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391.
+* `<AdvancedSearchRow>` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)

diff --git a/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js b/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js
@@ -75,7 +75,7 @@ const AdvancedSearchRow = ({
               : (
                 <Select
                   data-test-advanced-search-bool
-                  aria-label={intl.formatMessage({ id: 'stripes-components.advancedSearch.boolean.label' })}
+                  aria-label={intl.formatMessage({ id: 'stripes-components.advancedSearch.booleanLabel' })}
                   onChange={(e) => onChange(index, FIELD_NAMES.BOOL, e.target.value)}
                   value={rowState[FIELD_NAMES.BOOL]}
                   dataOptions={booleanOptions}
@@ -91,7 +91,7 @@ const AdvancedSearchRow = ({
             isCursorAtEnd
             rows={TEXTAREA_HEIGHT}
             data-test-advanced-search-query
-            aria-label={intl.formatMessage({ id: 'stripes-components.advancedSearch.field.label' })}
+            aria-label={intl.formatMessage({ id: 'stripes-components.advancedSearch.fieldLabel' })}
             onChange={(e) => onChange(index, FIELD_NAMES.QUERY, e.target.value)}
             value={rowState[FIELD_NAMES.QUERY]}
             autoFocus={isActive}

diff --git a/lib/Tooltip/Tooltip.css b/lib/Tooltip/Tooltip.css
@@ -21,6 +21,7 @@
   animation-timing-function: ease-in;
   animation-duration: 0.1s;
   font-size: var(--font-size-small);
+  pointer-events: all;
 }
 
 .text {

diff --git a/lib/Tooltip/Tooltip.js b/lib/Tooltip/Tooltip.js
@@ -48,6 +48,7 @@ export default class Tooltip extends Component {
   constructor(props) {
     super(props);
     this.triggerRef = props.triggerRef || createRef(null);
+    this.overlayRef = createRef(null);
   }
 
   state = {
@@ -99,10 +100,22 @@ export default class Tooltip extends Component {
     const disable = hideOnTouch && isTouch;
     clearTimeout(this.timeout);
 
-    if (bool !== open && !disable) {
-      this.setState({
-        open: bool,
-      });
+    // Accessibility - When hiding the tooltip, ensure that the mouse is not hovered over the tooltip
+    // - for mouse readers (WCAG 2.1 - 1.4.13 )
+    if (!bool) {
+      if (!this.overlayRef?.current?.matches(':hover') &&
+        !this.triggerRef?.current?.matches(':hover')
+      ) {
+        this.setState({
+          open: bool,
+        });
+      }
+    } else {
+      if (bool !== open && !disable) {
+        this.setState({
+          open: bool,
+        });
+      }
     }
   }
 
@@ -114,7 +127,7 @@ export default class Tooltip extends Component {
 
   hide = () => {
     clearTimeout(this.timeout);
-    this.toggle(false);
+    this.timeout = setTimeout(() => this.toggle(false), 150);
   }
 
   /**
@@ -213,7 +226,7 @@ export default class Tooltip extends Component {
           placement={placement}
           modifiers={modifiers}
         >
-          <div className={css.tooltip} aria-hidden data-test-tooltip>
+          <div className={css.tooltip} ref={this.overlayRef} onMouseLeave={()=>this.hide()} aria-hidden data-test-tooltip>
             {text && (
               <div className={css.text} data-test-tooltip-text>
                 {text}

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@csstools/postcss-relative-color-syntax": "^2.0.7",
     "@folio/eslint-config-stripes": "^7.0.0",
     "@folio/stripes-cli": "^3.0.0",
-    "@folio/stripes-testing": "^4.7.0",
+    "@folio/stripes-testing": "^4.9.0",
     "@formatjs/cli": "^6.1.3",
     "@storybook/addon-actions": "^7.6.12",
     "@storybook/addon-essentials": "^7.6.12",

diff --git a/translations/stripes-components/en.json b/translations/stripes-components/en.json
@@ -12,8 +12,8 @@
   "advancedSearch.match.containsAny": "Contains any",
   "advancedSearch.footer.search": "Search",
   "advancedSearch.footer.cancel": "Cancel",
-  "advancedSearch.boolean.label": "Operator",
-  "advancedSearch.field.label": "Search for",
+  "advancedSearch.booleanLabel": "Select Boolean operator",
+  "advancedSearch.fieldLabel": "Enter search term",
   "advancedSearch.match.label": "Match option",
   "advancedSearch.searchOptions.label": "Search options",
   "advancedSearch.searchOptions.query": "Query",

diff --git a/yarn.lock b/yarn.lock
@@ -2346,10 +2346,10 @@
     element-is-visible "^1.0.0"
     minimist "^1.2.0"
 
-"@folio/stripes-testing@^4.7.0":
-  version "4.8.10900000034395"
-  resolved "https://repository.folio.org/repository/npm-folioci/@folio/stripes-testing/-/stripes-testing-4.8.10900000034395.tgz#645cb7995b601d9c29095d270bfcf0091df3814e"
-  integrity sha512-5Ziwutee8e0uinHMq5aHrytY6ecC9qCFJCNJuBJx4WQbll9KMLkYPR3fF311Q1fSvyK9QMHPCKFHMblItRuQtA==
+"@folio/stripes-testing@^4.9.0":
+  version "4.9.10900000036396"
+  resolved "https://repository.folio.org/repository/npm-folioci/@folio/stripes-testing/-/stripes-testing-4.9.10900000036396.tgz#d439664b3bac42ce071f279934695950d81689e2"
+  integrity sha512-pEdF7uUqx+nx5/2/DWCNeH3/Pee5Xs09/EPptc0IXLKYRoos39MB1g6O+VSAxSVn/FpZyH77iy+MFlImphLIQA==
   dependencies:
     "@babel/core" "^7.19.3"
     "@babel/eslint-parser" "^7.19.1"