PCH: Fix accessibility issues

[acicovic]

Is your request related to a problem?

@GaryJones shared with us the following accessibility issues:

• 1. In the Content Helper, when adding/editing a post, there are repeated links to "Learn more about Parse.ly AI". This is an accessibility issue as they all point to different URLs, and when links are extracted as assistive technology can do, it won't be clear. While they can be made distinct with screen-reader text, it should probably say "Learn more about Title Suggestions" (or the other feature names) so that it's clear for visual users too.
• 2. The Tone, Persona, and a number of other "labels" are not semantically marked up as label elements, and are therefore not linked to the relative input fields.
• 3. Each of the Parse.ly feature's buttons are marked as is-primary. But the only primary button on the page should be the Publish button. If you look at Jetpack, they use secondary buttons, even for the Activate buttons.
• 4. The "Links" text next to the numerical input field for Smart Linking is blue for some reason. Makes it look like a hyperlink (especially as all the Learn more. links are nearby). This text should be black, and also potentially outside of the box around the input control (Related Posts have the inside-input-control text as black).

Describe the solution you'd like

Fix the accessibility issues, taking into account any impact on the UI (cc @dabowman).

[acicovic]

Items 1 and 3 should be solved by #3476.

[acicovic]

I've just pushed a change that takes care of the blue text in item 4, but haven't moved any markup.

I expect us to have a thorough accessibility audit at some point, and we can fix this then if it's a confirmed accessibility issue.

[acicovic]

I also pushed ef30924 which gives proper labels to the PersonaSelector, ToneSelector and InputRange controls.

The only exception is the "Apply Smart Links to" ToggleGroupControl in Smart Linking. This core control accepts a built-in label attribute. Here's the related code from here:

<ToggleGroupControl
	ref={ toggleGroupRef }
	__nextHasNoMarginBottom
	__next40pxDefaultSize
	isBlock
	value={ applyToValue }
	label={ __( 'Apply Smart Links to', 'wp-parsely' ) }
	onChange={ onToggleGroupChange }
>
	<ToggleGroupControlOption
		label={ __( 'Selected Block', 'wp-parsely' ) }
		value="selected" />
	<ToggleGroupControlOption
		label={ __( 'All Blocks', 'wp-parsely' ) }
		value="all" />
</ToggleGroupControl>

Unfortunately, this doesn't add a <label>, but a <span>. Also, the ToggleGroupControl signature expects that label attribute (errors out if not). I realize we could work around this using hacks (adding an empty label value if supported or hide it with CSS, as well as adding a label that would focus one of the ToggleGroupControlOptions) but I've chosen not to do this, at least for the time being.

With all that said, I'll consider this issue fixed once #3476 gets merged.