More misc a11y bits (#23542)

* List-ify guide labels

* Use aria-expanded with 🍔 menu

Author: rsese

components/guides/ArticleCard.tsx

@@ -16,20 +16,22 @@ export const ArticleCard = ({ card, typeLabel }: Props) => {
         </div>
         <p className="color-fg-muted my-3" dangerouslySetInnerHTML={{ __html: card.intro }} />
         {card.topics.length > 0 && (
-          <div>
+          <ul style={{ listStyleType: 'none' }}>
             {card.topics.map((topic) => {
               return (
-                <Label
-                  key={topic}
-                  data-testid="article-card-topic"
-                  variant="small"
-                  sx={{ bg: 'accent.emphasis', mr: 1 }}
-                >
-                  {topic}
-                </Label>
+                <li className="d-inline-block">
+                  <Label
+                    key={topic}
+                    data-testid="article-card-topic"
+                    variant="small"
+                    sx={{ bg: 'accent.emphasis', mr: 1 }}
+                  >
+                    {topic}
+                  </Label>
+                </li>
               )
             })}
-          </div>
+          </ul>
         )}
       </a>
     </div>

components/page-header/Header.tsx

@@ -95,6 +95,7 @@ export const Header = () => {
                 data-testid="mobile-menu-button"
                 onClick={() => setIsMenuOpen(!isMenuOpen)}
                 aria-label="Navigation Menu"
+                aria-expanded={isMenuOpen ? 'true' : 'false'}
               >
                 {isMenuOpen ? <XIcon size="small" /> : <ThreeBarsIcon size="small" />}
               </button>