For entry type and multi-site items, the menu button is nested inside the anchor; interactive elements should not be nested. This also causes some confusion on mobile, as the entire row (link and chevron) are inside the focus outline, so a user might think they are opening another disclosure and accidentally trigger the link to the new page.

Updated the markup so the a doesn't encompass the button element in order to keep things

Hamburger menu button focus outline is clipped and only visible on one side
Updated the hamburger to use var(--inner-focus-ring)

When tabbing through the breadcrumbs, the focus outline on the current entry is invisible

Also updated to use `var(--inner-focus-ring)

The site selector control should have a consistent name across all screens. I recommend using an icon button so that the accessible name of the button is consistent between entries and sites. For example: <li><a>{{ site name }}</a> <button aria-label=”Change site”>{{ world icon }}</button></li>

The name of the version switcher should be consistent across screens, for example “Change version”, instead of referring to the name of the version itself. (See recommendation for site switcher.)

Probably the biggest change in here. Updated disclosures in order to remove the label element and to separate out the descriptive label and so we can add a different, consistent label on the disclosure button. For revisions, that means the label will be "Current" or "Revision XX" and the disclosure label will be "Context"

The .menubtn for switching between entry types or sites must be 24px large, or leave sufficient space. (Note: this may be resolved when the button is no longer nested in the anchor.)

False positive caused by the .menubtn being within the a tag. Separating them cleaned this up.

 #action-btn and #context-btn use the disclosure button pattern, but rely on semantic label for an accessible description. Semantic label elements should not be with the disclosure pattern. For example: for the Action menu specifically, the accessible text should come from an aria-label or visually-hidden text inside the button itself.

Restructured to no longer rely on the label element.

On hover, the mobile hamburger menu button drops below 3:1 contrast

Darkened the text color on hover

On hover, the context button text drops below 4.5:1 contrast ratio against the button background.

Darkened the text color on hover

 When context menu is open, heading levels skip from h2 to h6. Recommendation: Add a visually-hidden heading to the context menu (i.e. “Entry Context”), and make all the other headings inside the disclosure h3

@gcamacho079 I'm having trouble figuring this one out. What's the best way for me to see this?

There are some instances where disclosure menus overflow and cause a horizontal scroll. Unsure if this is related to this PR, or should be tracked as a separate issue.

@gcamacho079 same thing here, is there a specific menu where this happens that I can look at?

For instances where a checkbox is used to identify selected language/version, the “check” pseudo-element should be given the role="img" and accessible name of "Selected". Ideally, this should follow the name of the link.

I don't think it's possible to add role=img to a psuedo element here especially because the image is actually text from a font. Is there another way to get this criteria? Can we add a selected label to the li itself?

 The first list in the Context menu has list markup, but I think it only ever has one item it it (i.e. Current). If this is true, the item probably shouldn’t be wrapped in a list.

If this is minor, I don't think it's worth it. Styling is based on this being an li and I'm not sure that's worth the refactor.