Settings > "Edit" link lacks context (Accessibility)

[tofumatt]

Bug Description

The “Edit” link for each section in Settings (Search Console, Analytics, etc.) lacks context and should have some visually hidden text so it reads “Edit Search Console settings” instead of just “Edit”.

Steps to reproduce

1. Go to Site Kit Settings page
2. Expand any module
3. Navigate to the "Edit" link for the module using a screen reader
4. See a basic "Edit" link with little context

Screenshots

Edit.link.lacks.context.and.should.be.a.button.mp4

---

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

Acceptance criteria

• The “Edit” link for a module should be updated to “Edit<VisuallyHidden> [MODULE NAME] settings</VisuallyHidden>”.

Implementation Brief

• In assets/js/components/settings/SettingsActiveModule/Footer.js
  • Wrap the existing Edit string with a span and give it a aria-hidden so the text is hidden for screen readers.
    

    site-kit-wp/assets/js/components/settings/SettingsActiveModule/Footer.js

    Lines 210 to 221 in cac2239

    	<Link
    	className="googlesitekit-settings-module__edit-button"
    	to={ `/connected-services/${ slug }/edit` }
    	onClick={ handleEdit }
    	>
    	{ __( 'Edit', 'google-site-kit' ) }
    	<PencilIcon
    	className="googlesitekit-settings-module__edit-button-icon"
    	width="10"
    	height="10"
    	/>
    	</Link>

  • Next to the <span> add a <VisuallyHidden> Element that contains the output for screen readers: "Edit [MODULE NAME] settings"
    • Use sprintf to inject the module name into the translation string, see
      

      site-kit-wp/assets/js/components/settings/SettingsActiveModule/Footer.js

      Lines 232 to 236 in cac2239

      	{ sprintf(
      	/* translators: %s: module name */
      	__( 'Disconnect %s from Site Kit', 'google-site-kit' ),
      	name
      	) }

Test Coverage

• Verify VRT tests don't fail
• Verify the screen reader reads "Edit MODULE NAME settings"

QA Brief

• Navigate to the Site Kit settings with a screenreader (like macOS's VoiceOver) enabled.
• Tab to the "Edit" link in the footer of a module in the list of modules.
• The label read should be "Edit [MODULE NAME] settings", not "Edit".

Changelog entry

• Add an aria-label to the edit link on the settings view component.

[derweili]

I deviated from the AC that recommeded to use “Edit<VisuallyHidden> [MODULE NAME] settings</VisuallyHidden>”.

This solution only works under the assumption that chaining the string in this order makes sense for all languages. That's not the case, e.g. for German you would put the "Edit" part at the end of the string.

Therefore I recommend using 2 different strings / solutions for visual UI an screen readers.

[eugene-manuilov]

I deviated from the AC that recommeded to use “Edit<VisuallyHidden> [MODULE NAME] settings</VisuallyHidden>”.

This solution only works under the assumption that chaining the string in this order makes sense for all languages. That's not the case, e.g. for German you would put the "Edit" part at the end of the string.

Therefore I recommend using 2 different strings / solutions for visual UI an screen readers.

@derweili I think the idea in AC was to use the createInterpolateElement function to generate one translatable string as we do it in other places like here:

site-kit-wp/assets/js/modules/tagmanager/components/settings/SettingsView.js

Lines 121 to 143 in a3fa8f3

	{ createInterpolateElement(
	sprintf(
	/* translators: %s: Appropriate container term. */
	__(
	'Edit <VisuallyHidden>%s </VisuallyHidden>in Tag Manager',
	'google-site-kit'
	),
	isSecondaryAMP
	? __(
	'web container',
	'google-site-kit'
	)
	: __(
	'container',
	'google-site-kit'
	)
	),
	{
	VisuallyHidden: (
	<VisuallyHidden />
	),
	}
	) }

[derweili]

@eugene-manuilov thank you for flagging that, I wasn't aware of that function.

However, this would still produce an incorrect output for German language as the translation for "edit" needs to be capitalized for showing UI but not for reading with screenreader.

So for Screenreaders the German translation should be: "Analytics bearbeiten"
But for UI it should show: "Bearbeiten" (As it already does in the existing UI)

Therefore translating this as <VisuallyHidden>Analytics</VisuallyHidden> bearbeiten would result in a wrong translation for the UI.

I doublechecked the code you mentioned and this existing code also has the same issue in the German translation.

The "im" word should be capitalized. Although in this particular case you could discuss if capitalizing is really required, but in the case we discuss for this issue it's definitelly required.

Therefore I would still go with the solution outlined in the IB.

[eugene-manuilov]

Ah... okay, thanks, @derweili, that makes sense. Ok, then IB looks good to me and i'll move it to EB. Also, looks like we need to rework our usage of visual hidden element and createInterpolateElement function to produce correct translations for all languages. @tofumatt what do you think?

[tofumatt]

Apologies for the late reply, but this makes sense. In this case the appropriate option would be to use an aria-label, which is what I've opted for in the PR, but auditing our use of "hidden" bits of sentences like this would be a good idea. That is more of a relatively minor UI/translation issue instead of an accessibility one that actually affects usability, but it's still worth checking out I think. 👍🏻

I've filed a follow-up issue: #7072

[wpdarren]

QA Update: ✅

Verified:

• With a screenreader enabled. The label reads "Edit [MODULE NAME] settings", not "Edit".
• I tested this by using macOS's VoiceOver. See screencast.
• In addition, I can see in the aria-label settings are correct too.
• Checked all modules within Site Kit.

Details

voice.mp4