Accordion - focus on note container instead

instead of summary tag
This commit is contained in:
2020-10-23 19:40:07 +05:30
parent fcfe3c70b9
commit ebb35a0833
+3 -6
View File
@@ -2,7 +2,6 @@ import React, { useRef, useEffect } from "react";
const Accordion = ({ children, title = "More" }) => { const Accordion = ({ children, title = "More" }) => {
const detailsRef = useRef(null); const detailsRef = useRef(null);
const summaryRef = useRef(null);
function openAccordionOnHash() { function openAccordionOnHash() {
const hash = location.hash.substring(1); const hash = location.hash.substring(1);
@@ -17,18 +16,16 @@ const Accordion = ({ children, title = "More" }) => {
// 1. If target is within current details element // 1. If target is within current details element
const detailsElement = detailsRef.current; const detailsElement = detailsRef.current;
const summaryElement = summaryRef.current;
if ( if (
detailsElement !== null && detailsElement !== null &&
summaryElement.current !== null &&
detailsElement.contains(targetElement) detailsElement.contains(targetElement)
) { ) {
// 2. and it is not open, // 2. and it is not open,
if (!detailsElement.open) { if (!detailsElement.open) {
// 3. Then open it // 3. Then open it
detailsElement.open = true; detailsElement.open = true;
// 4. and scroll into view, focus on summary // 4. and scroll into view and focus
summaryElement.focus(); targetElement.focus();
targetElement.scrollIntoView({ behavior: "smooth", block: "center" }); targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
} }
} }
@@ -48,7 +45,7 @@ const Accordion = ({ children, title = "More" }) => {
return ( return (
<details ref={detailsRef}> <details ref={detailsRef}>
<summary ref={summaryRef}>{title}</summary> <summary>{title}</summary>
{children} {children}
</details> </details>
); );