fix(space-widget): adjust colors for links, system message and external space message

[sokn-sys]

COMPLETES # https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-564411

This pull request addresses

FCC accessibility color contrast issue
https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-564411
https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-564410
https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-564409

by making the following changes

Updated CSS to change the color in order to meet the accessibility contrast requirements

Vidcast Link

https://app.vidcast.io/share/1e89ac89-b7ac-4ace-86d9-9653d82e4ea3

Change Type

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Tooling change
• Internal code refactor

The following scenarios were tested

• The testing is done with the amplify link
  < ENUMERATE TESTS PERFORMED, WHETHER MANUAL OR AUTOMATED >

The GAI Coding Policy And Copyright Annotation Best Practices

• GAI was not used (or, no additional notation is required)
• Code was generated entirely by GAI
• GAI was used to create a draft that was subsequently customized or modified
• Coder created a draft manually that was non-substantively modified by GAI (e.g., refactoring was performed by GAI on manually written code)
• Tool used for AI assistance (GitHub Copilot / Other - specify)
  • Github Copilot
  • Other - Please Specify
• This PR is related to
  • Feature
  • Defect fix
  • Tech Debt
  • Automation

Checklist before merging

• I have not skipped any automated checks
• All existing and new tests passed
• I have updated the testing document

---

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (6)

• packages/node_modules/@webex/react-component-activity-system-message/src/styles.css is excluded by !**/node_modules/**
• packages/node_modules/@webex/react-component-activity-text/src/__snapshots__/index.test.js.snap is excluded by !**/node_modules/**, !**/*.snap
• packages/node_modules/@webex/react-component-activity-text/src/index.js is excluded by !**/node_modules/**
• packages/node_modules/@webex/react-component-activity-text/src/styles.css is excluded by !**/node_modules/**
• packages/node_modules/@webex/react-container-activity-list/src/__snapshots__/index.test.js.snap is excluded by !**/node_modules/**, !**/*.snap
• packages/node_modules/@webex/widget-roster/src/components/external-participant/styles.css is excluded by !**/node_modules/**

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[aws-amplify-us-east-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-1455.d1l3lxgizk4iez.amplifyapp.com

[mkesavan13]

• Is there a dark theme in the space widgets and if yes, how are these changes affecting the dark theme?
• Please update the PR title with right component & message: fix(space-widget): adjust colors for links, system message and external space message
• In the demo, when you hover over the link, why is the color for the message "Testing" also changes?

[sokn-sys]

• Is there a dark theme in the space widgets and if yes, how are these changes affecting the dark theme?

Currently, Space Widget doesn’t support theme selection and uses only the default styling. The changes in this PR only affect that default theme. If theme support is introduced in the future, we’ll need to update the application-wide CSS color variables to align with Momentum theme colors

[sokn-sys]

• In the demo, when you hover over the link, why is the color for the message "Testing" also changes

The current HTML structure has an <a> tag wrapping another <a> tag, and the CSS library applies a global a:hover style. That’s why hovering over the inner test also changes the color of the "Testing" text. This behavior comes from the existing markup and library styles.

[mkesavan13]

The current HTML structure has an <a> tag wrapping another <a> tag, and the CSS library applies a global a:hover style. That’s why hovering over the inner test also changes the color of the "Testing" text. This behavior comes from the existing markup and library styles.

Were you able to check if this is fixable easily or requires a component level change?

[sokn-sys]

The current HTML structure has an <a> tag wrapping another <a> tag, and the CSS library applies a global a:hover style. That’s why hovering over the inner test also changes the color of the "Testing" text. This behavior comes from the existing markup and library styles.

Were you able to check if this is fixable easily or requires a component level change?

Replaced the anchor tag with a span tag. As shown in the attached screenshot, on hover only the link text color changes.

[mkesavan13]

The unit tests are failing. Please check

[sokn-sys]

The unit tests are failing. Please check
updated the snap shots

[mkesavan13]

Looks good to me