fix(fuselage): expose `IconButton` pressed state through `aria-pressed`

BI
16h ago
+35-0

Proposed changes (including videos or screenshots)

IconButton's pressed prop only added the -pressed classes, so assistive technology never heard the toggle state unless the caller also passed aria-pressed — and most Rocket.Chat callers (e.g. the sidebar toggler) do not.

IconButton now sets aria-pressed from pressed:

pressedaria-pressedAnnounced as
true"true"toggle button, pressed
false"false"toggle button, not pressed
omittednot setplain button (unchanged)

aria-pressed is only set when the element is a button (no role, or role='button'). An IconButton with another role, such as the emoji picker's category tabs (role='tab'), already announces its state through that role (aria-selected), so pressed keeps only styling it there.

A caller's own aria-pressed is spread after it, so it still takes precedence. Visual behavior is unchanged.

pressed: truepressed: false
IconButton with pressed true: aria-pressed="true"IconButton with pressed false: aria-pressed="false"

Issue(s)

Closes #42807

Steps to test or reproduce

  1. cd packages/fuselage && yarn jest src/components/Button/IconButton.spec.tsx — the new pressed, pressed={false} and non-button role tests fail without this change.
  2. yarn storybook in packages/fuselage → Inputs → IconButton → Icon Button, toggle the pressed control and inspect the button: aria-pressed follows it, and disappears when the control is reset.
  3. In the app, collapse the window below the sidebar breakpoint and inspect the sidebar toggle (burger) button: aria-pressed flips between "false" and "true" as the sidebar opens. The emoji picker category tabs keep only aria-selected.

Further comments

The behavior was unchanged from Fuselage 0.96.0, so it was out of scope for #42763, where it was found.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Accessibility
    • Icon buttons now announce their pressed or released toggle state to assistive technologies.
    • Caller-provided aria-pressed values remain supported.
    • Toggle-state announcements use role-appropriate accessibility attributes, avoiding aria-pressed for non-button roles.
  • Bug Fixes
    • Improved accessibility behavior for toggle-style icon buttons.