refactor: Enhance Message component accessibility and responsiveness

[Kalpana-chavhan]

Description

This PR addresses the accessibility and responsiveness gaps identified in the Message components suite. By shifting from generic div structures to semantic roles and implementing fluid typography, the component now meets modern inclusion standards.

Key Changes:

A11y (Accessibility):

• Added role="article" to the root Message component.
• Implemented dynamic tabIndex for clickable messages to support keyboard navigation.
• Added aria-selected and aria-busy states to communicate status to screen readers.

Responsiveness:

• Refactored message-block-width-fixed using clamp() to ensure message attachments adapt to mobile, tablet, and desktop viewports.
• Introduced fluid font sizes for message-body and message-header.

Testing:

• Integrated jest-axe for automated accessibility audits.
• Added unit tests for keyboard focusability and ARIA attribute propagation.

Verification:

• yarn test passes for Message.spec.tsx.
• No jest-axe violations detected.
• Focus ring visible during keyboard Tab navigation.

closes #1819

[changeset-bot]

⚠️ No Changeset found

Latest commit: 60162e6

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

[Kalpana-chavhan]

Hi Maintainers,
Just a gentle follow-up on this PR.
All checks are passing, please let me know if any changes are needed from my side.
Thanks! @KevLehman , @tassoevan , @ricardogarim , @dougfabris