@marcysutton Regarding "DEVIntersection button - needs a focus style in addition to more contrast." do you mean the "Register Now" button that has a focus style or something else?

@sjtrimble oh yes! That's what I meant. The "Register Now" button in that callout region.

@marcysutton Your comments asks for the addition of a focus style, but it already has this. I want to make sure I'm not missing anything here. Can you confirm? Thanks a bunch!

@sjtrimble are you looking at a different build perhaps? The site linked above in my ticket definitely does not have a focus style for that link button–it has hover only. Here's a screenshot:

@marcysutton My error!! Thanks for clarifying. Will look into that :)

@marcysutton regarding

Give this region a visually hidden heading, something like “h2. Search Results”. The other headings can become h3's.

I see that @sjtrimble did add the visually-hidden class in search-results.component.html. I still don’t understand how this works, what it solves, and whether we should apply similar reasoning elsewhere. Can you shed some light on this?

"DevIntersection Button" is checked "done" because it no longer exists.

@wardbell the idea is to provide a heading to the Search Results section for screen reader users, because they often navigate by headings. It could just as easily be a regular visible heading; but a using "visually-hidden" CSS preserves the existing design by hiding it from sighted users yet providing semantic structure for screen reader navigation. Making this new heading an h2 and restructuring the other Search Result headings as h3's will make it into a proper content hierarchy.

There are multiple ways to code visually hidden CSS; this method should work fine.

@marcysutton Can we use <section>/<article> instead of <h2>/<h3>? It's not something that you can link to. It's just a label for a collection of results (if there happen to be any).

PR #16468 Moves search results under search box (just below the top toolbar). The first tab out of the search box ends up in the first result. I believe that's what was necessary to check a box in the Search Results section above.

@marcysutton regarding Search Results item:

Escape key should send focus back to the triggering input

I think it does that now. When I type in the search box and hit escape, I stay in the search box.

What behavior are we missing? If I mouse or tab out of the search box and then hit escape, I do not return to the search box. Should I? Is that what you mean?

I am pretty sure that's what she meant 😃

Fixed

Escape key should send focus back to the triggering input

in #16758

Fixed:

Sidenav Links - No href attributes, so they aren't focusable. I'd recommend buttons for toggles instead of links.

in #16807

All the checkboxes are ticked!

Noting that there may still be additional issues on other pages in the absence of a full audit, I found another serious item. The header-link anchor tags used to deep link headings are poorly constructed:

The anchors have aria-hidden="true" but they still have hrefs, causing what we call "ghost controls" with no accessibility information when focused. Pair that with a hover state on the child icon element only and no focus state to make them visible, and they are pretty bad accessibility-wise.

Here's a screenshot:

To fix these, I'd move the hover state to the anchor and add a focus state at the same time. Remove aria-hidden="true" and they should work better.

Moving the issue with the heading anchors to a new issue: #16854

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}