Skip to content

Add ARIA disclosure attributes to bottom-right panel tab buttons#3566

Open
Yayabtw wants to merge 1 commit into
JuliaPluto:mainfrom
Yayabtw:aria-attributes-tab-buttons
Open

Add ARIA disclosure attributes to bottom-right panel tab buttons#3566
Yayabtw wants to merge 1 commit into
JuliaPluto:mainfrom
Yayabtw:aria-attributes-tab-buttons

Conversation

@Yayabtw

@Yayabtw Yayabtw commented May 31, 2026

Copy link
Copy Markdown

What

Adds aria-expanded and aria-controls attributes to the two tab buttons that toggle the live docs and process status panels in the bottom-right helpbox (BottomRightPanel.js).

Why

As described in #3274, these <button> elements act as toggle controls (open/close a panel) but expose no semantics to assistive technologies — screen-reader users cannot tell that the buttons control a different region of the page or whether the panel is currently expanded.

How

The interaction matches the W3C WAI-ARIA disclosure pattern:

  • aria-expanded is bound to the open state (open_tab === "docs" / open_tab === "process"), so it flips between true and false as the user toggles the panel.
  • aria-controls points to the <pluto-helpbox> element, which holds the disclosed content (the helpbox is the single container that swaps between docs view and status view depending on which tab is active). An id="pluto-helpbox" is added so the reference is resolvable.

Fix #3274

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/Yayabtw/Pluto.jl", rev="aria-attributes-tab-buttons")
julia> using Pluto

The "live docs" and "process status" tab buttons are toggle controls
that show/hide a panel. Add `aria-expanded` (reflecting the open state)
and `aria-controls` (pointing to the `<pluto-helpbox>` panel) so that
assistive technologies can announce the relationship and state.

Follows the W3C WAI-ARIA disclosure pattern
(https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).

Refs JuliaPluto#3274
@fonsp

fonsp commented Jun 1, 2026

Copy link
Copy Markdown
Member

Hey! Thanks for your contribution! Could you write a bit about who you are and what makes you interested in contributing to Pluto's accessibility? Do you have experience with Web Acccessibility?

-fons

@fonsp

fonsp commented Jun 11, 2026

Copy link
Copy Markdown
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add ARIA attributes to tab buttons

2 participants