Responsive and accessible accordeon widget

Community feedback

• 

  Filip Juszczak•690

  @filipjuszczakPosted 5 months ago

  Hi!

  For the "FAQ" abbreviation, you might want to use abbr tag with the title attribute to explain the abbreviation to the user (a tooltip is shown when user hovers on it):

  <h1 className="font-bold text-[2rem] leading-[38px] desktop:text-[3.5rem] desktop:leading-[65.7px] text-purple-dark">
    <abbr title="Frequently Asked Questions">
      FAQs
    </abbr>
  </h1>
  

  You could use the details and summary tags to create the accordion. You wouldn't need to implement open/close functionality, as it's already in place. It would look something like that:

  export default function Accordeon({
    topic,
    content,
    open,
    onOpenChange,
  }: AccordeonProps) {
    return (
      <details open={open}>
        <summary>{topic}</summary>
        <p>{content}</p>
      </details>
    );
  }
  

  Great job!

  Marked as helpful

  1