fix(component-status): hide design link from anonymous users

[marissahuysentruyt]

Description

Hides the component-status Design pill from anonymous visitors, matching the authentication policy used by page-nav's See in Figma link.

• align the Design status pill with the existing authenticated Figma policy
• fail closed on authentication errors while preserving public "Code" status
• avoid flashing gated content by resolving visibility before rendering

Screenshots (if applicable)

Type of change

• Bug fix
• New feature / block
• Refactor
• Docs / content
• Chore (deps, config, tooling)

Related issue(s)

• fixes [Issue Number]

Validation steps

• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).
• This PR affects existing pages, so automated E2E tests were run (see below).
• This PR has new code, so new tests were added or updated, and they pass.

To Validate

URL for testing:
https://hide-figma-link--spectrum-hub--adobe.aem.live/web/rsp/components/tooltip
https://hide-figma-link--spectrum-hub--adobe.aem.live/web/swc/components/color-handle-and-loupe

• Make sure all PR checks have passed.
• Pull down the branch locally or visit a component page on the branch preview.
• While signed out, confirm Code status renders and the complete Design status pill is absent.
• Confirm the Design pill does not flash while the page loads.
• Sign in and reload the component page; confirm Code and Design statuses both render.
• Confirm the Design link opens the expected Figma destination.
• With aem up, confirm both Code and Design statuses render without requiring authentication.

Accessibility testing checklist

• Keyboard

  1. Open a component page while signed out.
  2. Press Tab through the component-status block.
  3. Confirm the Code link receives a visible focus indicator and activates with Enter.
  4. Confirm no hidden or empty Design control enters the tab order.
  5. Sign in, reload the page, and press Tab through the block again.
  6. Confirm Code and Design links receive focus in a logical order and each activates with Enter.

• Screen reader

  1. Open a component page while signed out and navigate to the component-status block.
  2. Confirm the block is announced as the Component status group.
  3. Confirm Code status has a clear accessible name and no Design status is announced.
  4. Sign in and reload the page.
  5. Confirm the group contains both Code and Design statuses with clear names, roles, and availability text.
  6. Confirm there are no duplicate, empty, or stale Design announcements while authentication completes.

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 6546a5b ✅ (latest)

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/web/rsp/components/tooltip
🖥️	/web/rsp/components/tooltip
📱	/web/swc/components/color-handle-and-loupe
🖥️	/web/swc/components/color-handle-and-loupe