fix(a11y-5): add unique aria-label to complementary Activity landmarks

[Sagar-6203620715]

Summary

This PR fixes an accessibility issue where multiple complementary landmarks were rendered without unique labels, making them indistinguishable for screen reader users.

A unique aria-label is now applied to each Activity landmark.

Related Issue

Fixes #4385
point 5 (Landmark Unique) from the accessibility audit. #4385

Changes

• Added a unique aria-label to the role="complementary" container in Activity.tsx
• Label uses the activity title when available
• Falls back to a deterministic Activity N label when no string title is provided

Steps to Test

1. Open Storybook and navigate to Activity stories
2. Render scenarios with multiple activities (e.g., split-left / split-right)
3. Inspect DOM or use a screen reader
4. Verify each complementary landmark has a unique, descriptive label

Screenshots (if applicable)

N/A

Notes for the Reviewer

• This is a minimal, non-breaking change

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Sagar-6203620715
Once this PR has been reviewed and has the lgtm label, please assign joaquimrocha for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Copilot]

Pull request overview

This PR addresses an accessibility issue where multiple Activity landmarks with role="complementary" lacked unique labels, making them indistinguishable for screen reader users. The fix adds a unique aria-label to each Activity landmark that either uses the activity's title (if it's a string) or falls back to a numbered label pattern.

Changes:

• Added aria-label attribute to the role="complementary" container in Activity.tsx
• The label uses the activity title when it's a string, or defaults to "Activity N" format

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Sagar-6203620715]

Hi @illume I have resolved all the review from copilotAI.
Please approve the CI workflows.
Please review it.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The implementation is incomplete and does not provide a fallback label when title is not a string, leaving complementary landmarks without unique labels in that case.

According to the PR description, the code should "fall back to a deterministic Activity N label when no string title is provided," but currently when title is not a string (including when it's undefined), aria-label will be set to undefined, effectively not providing any label.

This means that in scenarios like the "Basic" story where activities are created without titles, the complementary landmarks will still lack unique labels, failing to address the accessibility issue from #4385.

The aria-label should be computed to always provide a value, for example:

aria-label={typeof title === 'string' ? title : `Activity ${index + 1}`}

This would ensure every complementary landmark has a unique, accessible name as required by WCAG 2.1 success criterion 2.4.1 (Bypass Blocks).

Suggested change

	aria-label={typeof title === 'string' ? title : undefined}
	aria-label={typeof title === 'string' ? title : `Activity ${id}`}

[illume]

@Sagar-6203620715 this seems like a good suggestion.

[Copilot]

There is a discrepancy between the PR description and the actual implementation. The PR description states:

"Falls back to a deterministic Activity N label when no string title is provided"

However, the code sets aria-label to undefined when the title is not a string, which means no fallback label is actually provided. This discrepancy should be addressed by implementing the fallback behavior described in the PR.

[illume]

Similar to the other comment, I think this is a good suggestion. What do you think?

[illume]

Please look at the open comments about providing a name when title is missing.

[illume]

hey hey.

I'll mark this as draft for now to make it easier on reviewers. If you want to continue it, please mark it as ready to review when you've pushed changes.