Skip to content

Making AdSense CTA accessible #9289

@kelvinballoo

Description

@kelvinballoo

Feature Description

On the AdSense CTA within the SK dashboard, the sub-text when not highlighted appears as an accessibility issue for the contrast.

Steps to reproduce:

  • Set up Site Kit
  • On SK dashboard, scroll to the very bottom to the Connect Service: Adsense CTA.
  • There are 3 main points under that section and there is a highlight/animation that selects one point at a time
  • The highlighted point is accessible
  • If you inspect those that are not highlighted, they are not accessible with a contract value of 4.01 (Refer image under Details)
Details Screenshot 2024-09-03 at 20 32 35

Suggestion : To make the points that are not highlighted accessible. It might require some discussion on how best to achieve that.


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • Improve the contrast on the AdSense steps to meet minimum accessible criteria.

Implementation Brief

  • Update file assets/sass/components/setup/_googlesitekit-adsense-connect-cta.scss — bump the un-highlighted h4 and p to surfaces/on-background-variant (#6C726E) so idle slides meet ≥ 4.5:1 contrast while preserving the active-state brand palette and transition classes.

Test Coverage

  • No new test coverage required.

QA Brief

  • The idle slides in Adsense CTA should have color set to #6C726E ( rgb(108, 114, 110) ) for both h4 and p elements.

Changelog entry

  • Improve the contrast for text in AdSense setup CTA widget.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Module: AdSenseGoogle AdSense module related issuesP2Low priorityTeam MIssues for Squad 2Type: EnhancementImprovement of an existing feature

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions