Yellow sidebar markup is incorrect

Question

Your yellow sidebar has a slight markup issue. You have a loop on the <ul> of your lists, when it should be on the <li>.

Here's the markup for that component, stripped of attributes and inner text for readability.

<div>
   <div></div>
   <ul> <!-- The looping should be on the <li></li> element, not the <ul></ul> -->
      <li>
         <div>
            <a>
               <svg>
                  <path></path>
               </svg>
            </a>
         </div>
         <div>
            <a></a>
         </div>
      </li>
   </ul> <!-- See? -->
   <ul>
      <li>
         <div>
            <a>
               <svg>
                  <path></path>
               </svg>
            </a>
         </div>
         <div>
            <a></a>
         </div>
      </li>
   </ul>
</div>

Answer 1

We've fixed this and also have taken the opportunity to fix it up a bit visually as well by removing the unnecessary lines between each item. This also helps a lot with accessibility for folks using screen readers. Thanks for the report!