Skip to content

Conversation

@Mubashir2611
Copy link

Proposed changes

This PR enhances accessibility and responsiveness across all Message components to ensure WCAG 2.1 compliance and improve user experience across all devices and assistive technologies.

Accessibility Enhancements:

  • Added semantic ARIA roles (role="article", role="group", role="region") to Message, MessageHeader, MessageBody, MessageReactions, and MessageMetrics
  • Added descriptive aria-label attributes for screen reader context
  • Added aria-busy and aria-selected state indicators to Message component
  • Implemented full keyboard navigation support (Enter/Space keys) for MessageReaction and MessageReactionAction
  • Changed MessageTimestamp from <span> to semantic <time> element with dateTime prop
  • Added aria-pressed state to MessageReaction for toggle indication

Responsive Design Improvements:

  • Implemented fluid padding using clamp(8px, 3vw, 20px) for adaptive spacing
  • Added breakpoint-based layouts (mobile: column, tablet/desktop: row)
  • Added responsive typography with clamp(0.875rem, 2.5vw, 1rem) and proper line-height

Testing:

  • Enhanced Message.spec.tsx with accessibility and keyboard navigation tests
  • Created comprehensive test suites for MessageBody, MessageHeader, MessageTimestamp, and MessageReaction components
  • All tests include jest-axe accessibility validation

Issue(s)

Closes #1819

Further comments

All changes are backward compatible and follow WCAG 2.1 Level AA guidelines. The implementation uses existing theme variables and breakpoint mixins to maintain consistency with the design system.

@changeset-bot
Copy link

changeset-bot bot commented Jan 4, 2026

⚠️ No Changeset found

Latest commit: 061ec40

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


Muberser seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

1 similar comment
@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


Muberser seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

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.

refactor: Message Components for Accessibility and Responsiveness

2 participants