Accordion - Accessibility

Community feedback

• 

  P

  Facundo Andrés De Los Rios•360

  @FacundoDLRPosted about 1 month ago

  mmm well I still don't understand all your code, I think you used react for your project and I haven't started with that framework yet, but according to the css I see I can suggest you look at the background-size property you used in body, it doesn't respond very well on mobile devices, an alternative you can use to create the two-color background is by using a container that has the approximate measurements for the purple color along with the background svg pattern.

  On the other hand, if what you are looking for is to create a kind of transition when each list is clicked and it expands creating a smooth slide, you can try with css and js. For that we will use the max-height properties in combination with overflow:hidden and transition but first you should check (remove) the hidden attribute in each <p> element. Example:

  li p {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  
  li button[aria-expanded="true"] + p {
  max-height: 200px; /* Adjusts according to content */
  opacity: 1;
  }
  

  Now with the help of js we will use the attribute aria-expanded to switch between true/false. First we select all the buttons and then we add a click event to each one to toggle aria-expanded and that's it, it should work.

  const allButtons = document.querySelectorAll("button");
  
  allButtons.forEach((button) => {
   button.addEventListener("click", () => {
  
   const expanded = button.getAttribute("aria-expanded") === "true";
  
   button.setAttribute("aria-expanded", !expanded);
  
   });
  });
  

  I hope it helps you in some way, Greetings!

  0