Keyboard selection does not appear for high contrast color modes

[peterychang]

They keyboard selection box does not appear on the sidebar or page navigation bar under high contrast modes (tested on Windows Aquatic and Desert themes)

Normal color mode:

High contrast (Aquatic) color mode:

[trallard]

Thanks for taking some time to report these issues, we'll have a look soon-ish. ☺️

[peterychang]

This also happens for the right sidebar (on-page navigation)

[peterychang]

I've done this as a workaround for this bug and #2140 . There are some weird behaviors with it (nested navigation sidebars have multiple active indicators), but its serviceable until the bugs get resolved

@media (forced-colors: active) {
  /* Top breadcrumbs navigation */
  .bd-breadcrumbs .breadcrumb-item > a:focus-visible{
    border: 2px solid var(--pst-color-primary);
  }

  /* Left sidebar */
  nav.bd-links .navbar-nav .toctree-l1>a:focus-visible {
    border: 2px solid var(--pst-color-primary);
  }
  nav.bd-links .current>a  {
    box-shadow: none;
    border-left: 4px solid var(--pst-color-primary) !important;
  }

  /* Right sidebar */
  .bd-sidebar-secondary .sidebar-secondary-items .nav-item .active {
    box-shadow: none;
    border-left: 5px solid var(--pst-color-primary) !important;
  }
  .bd-sidebar-secondary .sidebar-secondary-items .nav-item>a:focus-visible {
    border: 2px solid var(--pst-color-primary);
  }
}

[trallard]

Thanks for following up on this, it is much appreciated 🙂
Yes we have been having some issues with the TOC active indicator, but they are being worked on right now (hopefully we will be able to merge a fix soon as this behaviour is rather annoying).
I will have a look at your fix and see if we can move it to a PR unless you're happy to open a PR and you can tag me or @gabalafou for feedback/reviews.

[peterychang]

I will likely be submitting more accessibility bugs in the next few days/weeks. Would you prefer I submit one issue per bug, or compile them into a single issue?

[drammock]

I will likely be submitting more accessibility bugs in the next few days/weeks. Would you prefer I submit one issue per bug, or compile them into a single issue?

if they're related, like "fix focus box on {left navbar, right navbar, breadcrumb}" then one PR is better. If they're unrelated, then separate PRs are easier to review.

[peterychang]

Focus box on jupyter notebook output cells are also broken

Working code cell:

Broken output cell:

This CSS fixes the issue

.bd-article .docutils .cell_output .output .highlight > pre:focus-visible{
  border: 2px outset var(--pst-color-secondary);
}

Note: A scrollbar needs to be visible before the box becomes selectable

[trallard]

I know @gabalafou is working on notebooks input/output so tagging him here for visibility.

As for accessibility issues @peterychang for related ones feel free to collect them in a single issue otherwise separate issues are best to keep fixes self contained.

[trallard]

Follow up questions for @peterychang

• What browser are you using?
• It seems the screenshots you have added are from your docs, do you have a public link to the published version?

[peterychang]

I am using chrome and edge for my testing. The website is https://microsoft.github.io/autogen/stable/

https://microsoft.github.io/autogen/dev will get you the site with all my latest fixes.

https://microsoft.github.io/autogen/0.4.8/ will get you a stable link to the site without any of the fixes

[gabalafou]

Hi @peterychang, thanks for finding and reporting accessibility issues 🌻

I noticed in the footer of your docs site that the PyData Sphinx Theme version number is 0.15.4. Here's a screenshot showing the footer:

Is there any way you could use the newer version? There were quite a few accessibility improvements made in the last release. For example, in issue #2149 you mentioned that a keyboard user loses their place when exiting the search dialog, but that was fixed between 0.15.4 and 0.16.0. You can test this on our docs site by switching versions using the dropdown in the header.

I think that the other issues you've raised are still outstanding. I didn't realize that the focus rings for notebook outputs were broken, so thanks for bringing that to my attention. I will open a separate issue for that.

We are aware that there are a number of issues with high contrast mode—see audit findings from 2024. But we never prioritized that work, so it would be great if you want to work on that. The one thing I would say about the solution you implemented on your site is that using borders for the focus ring instead of outlines causes the content to shift as the user tab-navigates, so I don't think it would be an appropriate solution for the theme. I think that the underlying reason some of the focus rings do not show up in high contrast mode is because for some focus rings we use box shadows instead of CSS outlines. If I remember correctly, the reason we do that is to override Bootstrap, which for some reason I don't understand, sometimes uses box shadows for focus rings.