cypress-axe accessibility test fails: "ARIA role group is not allowed for given element" #825

Activity

1. j10sanders

   added

   bugSomething isn't workingSomething isn't working

   on Jun 6, 2022
2. NaotoshiFujita commented on Jun 11, 2022

   

   NaotoshiFujita

   on Jun 11, 2022

   Collaborator

   More actions

   After some research, this is because <li> does not accept role="group".
   By the historical reason, this cannot be fixed soon.

   Using <div> instead of <ul> and <li> will get rid of the issue, I guess.

   👍React with 👍4Reacted by Mehmet Şahin, Jamie Jenkins, Olivier Melcher and goldfinch
3. NaotoshiFujita

   closed this as completedon Sep 1, 2022
4. attila-albert commented on Sep 21, 2024

   

   attila-albert

   on Sep 21, 2024

   More actions

   I came up with this solution, that does the job :)

   // Use the 'mounted' event to modify slide attributes after Splide mounts
   splide.on('mounted', function () {
       let slides = elms[i].querySelectorAll('.splide__slide');
       let slideList = elms[i].querySelector('.splide__list'); // Use querySelector for a single element
       
       // Modify the slides
       slides.forEach(function (slide) {
           slide.removeAttribute('role'); // Remove invalid role
           slide.setAttribute('role', 'listitem'); // Add valid role
       });
   
       // Modify the slide list
       if (slideList) {
           slideList.removeAttribute('role'); // Remove the invalid role
           slideList.setAttribute('role', 'list'); // Add a valid role
       }
   });
   
   // Mount the Splide instance
   splide.mount();
   

   👍React with 👍2Reacted by phl23 and James Scariati
5. phl23 commented on Sep 26, 2024

   

   phl23

   on Sep 26, 2024

   More actions

   Good job @attila-albert

   Here is a Typescript version for react with createRef

   "use client";
   import Splide from "@splidejs/splide";
   
   // Create a ref to the Splide component
   const splideRef = createRef<HTMLDivElement>();
   
   // Mount the Splide slider
   useEffect(() => {
     if (!splideRef.current) return;
     // Create a Splide instance
     const splide: Splide = new Splide(splideRef.current, {});
   
     // Use the 'mounted' event to modify slide attributes after Splide mounts
     splide.on("mounted", function () {
       const slides =
         splideRef?.current?.querySelectorAll(".splide__slide");
       const slideList =
         splideRef?.current?.querySelector(".splide__list"); // Use querySelector for a single element
     // Modify the slides
     slides?.forEach(function (slide) {
         slide.removeAttribute("role"); // Remove invalid role
         slide.setAttribute("role", "listitem"); // Add valid role
       });
   
       // Modify the slide list
       slideList?.removeAttribute("role"); // Remove the invalid role
       slideList?.setAttribute("role", "list"); // Add a valid role
     });
   
     // Mount the Splide instance
     splide.mount();
   
     return () => {
       splide.destroy();
     };
   }, [splideRef]);