Custom Widgets

[smeragoel]

1. 📜 Instructions Compliance

• If a custom widget has a visible label or instructions, they must be programmatically determinable - WCAG 1.3.1, WCAG 2.5.3

  • Path
    .me-auto > .navbar-item:nth-child(1) > .version-switcher__container.dropdown > .version-switcher__button[role="button"][aria-haspopup="listbox"]

  • Snippet

  <button id="versionswitcherbutton" type="button" role="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="listbox" aria-controls="versionswitcherlist" aria-label="Version switcher list" data-active-version-name="dev" data-active-version="dev" aria-expanded="false">

  • Design Pattern
    Accordion, Button, Disclosure (Show/Hide), Menu Button.
  • Accessible Name
    -
  • Accessible description
    -

2.⌨️ Keyboard Interaction

• A custom widget must support the keyboard interaction specified by its design pattern - WCAG 2.1.1

  • Path
    div[data-bs-popper="static"]

  • Snippet

   <div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0 show" role="listbox" aria-labelledby="versionswitcherbutton" data-bs-popper="static">

  • Design Pattern
    Listbox
  • Accessible Name
    -

[smeragoel]

@gabalafou to look into this and research the WCAG requirement (similar to #57)

[gabalafou]

Both of items in the issue description have to do with the version switcher.

We can check off the first item because it's about making sure that any visible labels or instructions can be picked up by assistive tech like screen readers. As far as I can tell, all visible text in the version switcher shows up in the accessibility tree, so we should be good here. (Looking at the latest version of the PyData theme site.)

So I'm going to go ahead and check the first item.

For the second item, it boils down to making sure that our use of the "listbox" role is correct. Should the version switcher menu have role equal to listbox? And if so, have we correctly implemented that design pattern. In particular, does it support the keyboard shortcuts that it should. That's actually been on my own to-do list, so it's good we're tracking it.

[gabalafou]

Related:

• BUG: fix highlighting of current version in switcher menu pydata/pydata-sphinx-theme#1357
• Adrian Roselli blog post stop using "drop-down"

[trallard]

Ref on version button: pydata/pydata-sphinx-theme#1357
Checked against:

• https://adrianroselli.com/2020/03/stop-using-drop-down.html?ref=prototyprio
• https://www.24a11y.com/2019/select-your-poison/