STCOM-1257 - Focused accordion should have highest z-index. (#2220)

* set focused accordion to the highest z-index

* properly reference accordionList in accordionSet

* log changes

* properly access accordionlist

* update changelog

* add focus/blur handlers for z-index adjustment

CHANGELOG.md

@@ -20,6 +20,7 @@
 * Upgrade `stylelint` and fix errors. Refs STCOM-1087.
 * Show action buttons in correct color. Refs STCOM-1256.
 * Accessibility | Repeatable Field Component. Refs STCOM-766.
+* Apply highest z-index to focused `<Accordion>` within `AccordionSet`. Refs STCOM-1257.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)

lib/Accordion/Accordion.js

@@ -103,11 +103,15 @@ const Accordion = (props) => {
   const [isOpen, updateOpen] = useState(open || !closedByDefault);
   const [registered, updateRegistered] = useState(!accordionSet);
   const [stackOrder, updateStackOrder] = useState(1);
+  const [zIndex, updateZIndex] = useState(1);
 
   const uncontrolledToggle = useRef(() => {
     updateOpen(current => !current);
   }).current;
 
+  const handleFocusIn = () => updateZIndex(accordionSet?.getNumberOfAccordions() || 2);
+  const handleFocusOut = () => updateZIndex(stackOrder);
+
   const onToggle = (toggleArgs) => {
     if (typeof open === 'undefined') {
       uncontrolledToggle(toggleArgs);
@@ -128,7 +132,9 @@ const Accordion = (props) => {
     function registrationCallback(isRegistered) {
       updateRegistered(isRegistered);
       if (accordionSet) {
-        updateStackOrder(accordionSet.getStackOrder(trackingId));
+        const defaultZIndex = accordionSet.getStackOrder(trackingId);
+        updateStackOrder(defaultZIndex);
+        updateZIndex(defaultZIndex);
       }
     }
 
@@ -157,6 +163,8 @@ const Accordion = (props) => {
       id={trackingId}
       className={getRootClasses(separator, disabled, className)}
       data-test-accordion-section
+      onFocus={handleFocusIn}
+      onBlur={handleFocusOut}
     >
       <HotKeys
         id={`${trackingId}-hotkeys`}
@@ -166,7 +174,7 @@ const Accordion = (props) => {
       >
         {headerElement}
       </HotKeys>
-      <div className={getWrapClass(isOpen)} style={{ zIndex: stackOrder }}>
+      <div className={getWrapClass(isOpen)} style={{ zIndex }}>
         <div
           role="region"
           className={getContentClass(isOpen)}

lib/Accordion/AccordionSet.js

@@ -102,7 +102,11 @@ class AccordionSet extends React.Component {
   getStackOrder = (id) => {
     const { accordionList } = this.state;
     const index = accordionList.findIndex(a => a.id === id);
-    return accordionList.length - index;
+    return index;
+  }
+
+  getNumberOfAccordions = () => {
+    return this.state.accordionList.length;
   }
 
   registerAccordion = (getRef, id, closedByDefault = false, confirm) => {
@@ -195,6 +199,7 @@ class AccordionSet extends React.Component {
                   toggleKeyHandlers: this.toggleKeyHandlers,
                   toggleKeyMap: this.toggleKeyMap,
                   getStackOrder: this.getStackOrder,
+                  getNumberOfAccordions: this.getNumberOfAccordions,
                 }
               }}
             >

lib/Accordion/stories/BasicUsage.js

@@ -8,6 +8,7 @@ import React, {useState, useRef} from 'react';
 import faker from 'faker';
 import { AccordionSet, Accordion } from '..';
 import Button from '../../Button';
+import Datepicker from '../../Datepicker';
 
 const BasicUsage = () => {
   const [textValue, updateTextValue] = useState();
@@ -33,6 +34,7 @@ const BasicUsage = () => {
     <Accordion label="Extended Information" closedByDefault>
       {paragraphs[1]}
       <br />
+      <Datepicker />
       <br />
       {paragraphs[2]}
     </Accordion>

lib/Accordion/stories/ExpandAllWithinSet.js

@@ -8,6 +8,7 @@ import React from 'react';
 import faker from 'faker';
 import { AccordionSet, Accordion, ExpandAllButton } from '..';
 import Button from '../../Button';
+import Datepicker from '../../Datepicker';
 
 const ExpandAllWithin = () => {
   const [status, updateStatus] = React.useState({
@@ -48,12 +49,14 @@ const ExpandAllWithin = () => {
         <Accordion label="Extended Information" id="exinfo" closedByDefault>
           {faker.lorem.paragraph()}
           <br />
+
           <br />
           {faker.lorem.paragraph()}
         </Accordion>
         <Accordion label="Proxy" id="proxy">
           {faker.lorem.paragraph()}
           <br />
+          <Datepicker />
           <br />
           {faker.lorem.paragraph()}
         </Accordion>