mirror of
https://github.com/bendtherules/UiQuestions.git
synced 2026-08-18 22:02:42 +00:00
Accordion - focus on note container instead
instead of summary tag
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user