PCH: Fix some accessibility issues in Post Editor tooling

build/content-helper/dashboard-page.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => 'bf43ef1d42f5c7a648d3');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '4fb2322c06d2f85c1b68');

build/content-helper/editor-sidebar.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => '74687008750bc3eb11e8');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'b8c75d1999541f89d95b');

src/content-helper/common/components/input-range/component.tsx

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	__experimentalHeading as Heading,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	__experimentalNumberControl as NumberControl,
 	RangeControl,
 } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Defines the props structure for InputRange.
@@ -46,11 +46,16 @@ export const InputRange = ( {
 	disabled,
 	className,
 }: Readonly<InputRangeProps> ): React.JSX.Element => {
+	const numberControlId = `parsely-inputrange-control-${ useInstanceId( InputRange ) }`;
+
 	return (
 		<div className={ `parsely-inputrange-control ${ className ? className : '' }` }>
-			<Heading className={ 'parsely-inputrange-control__label' } level={ 3 }>{ label }</Heading>
+			<label htmlFor={ numberControlId } className={ 'wp-parsely-editor-sidebar-label' }>
+				{ label }
+			</label>
 			<div className={ 'parsely-inputrange-control__controls' }>
 				<NumberControl
+					id={ numberControlId }
 					disabled={ disabled }
 					value={ value }
 					suffix={ <InputControlSuffixWrapper>{ suffix }</InputControlSuffixWrapper> }

src/content-helper/common/components/input-range/style.scss

@@ -8,10 +8,6 @@
 	gap: var(--grid-unit-10);
 	align-self: stretch;
 
-	.parsely-inputrange-control__label {
-		margin: 0;
-	}
-
 	.parsely-inputrange-control__controls {
 		display: flex;
 		height: to_rem(40px);
@@ -38,10 +34,6 @@
 			.components-base-control__field {
 				flex-grow: 1;
 			}
-
-			.components-input-control__suffix {
-				color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-			}
 		}
 
 		.components-range-control {

src/content-helper/common/components/persona-selector/component.tsx

@@ -8,7 +8,7 @@ import {
 	MenuItem,
 	TextControl,
 } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, edit } from '@wordpress/icons';
@@ -192,16 +192,21 @@ export const PersonaSelector = ( {
 	disabled = false,
 	allowCustom = false,
 }: Readonly<PersonaSelectorProps> ): React.JSX.Element => {
+	const togglePropsId = `parsely-persona-selector-${ useInstanceId( PersonaSelector ) }`;
+
 	return (
 		<Disabled isDisabled={ disabled }>
-			{ label && <div className="wp-parsely-dropdown-label">{ label }</div> }
+			{ label && <label htmlFor={ togglePropsId } className="wp-parsely-editor-sidebar-label">
+				{ label }
+			</label> }
 			<DropdownMenu
 				label={ __( 'Persona', 'wp-parsely' ) }
 				className={ 'parsely-persona-selector-dropdown' + ( disabled ? ' is-disabled' : '' ) }
 				popoverProps={ {
 					className: 'wp-parsely-popover',
 				} }
 				toggleProps={ {
+					id: togglePropsId,
 					children: (
 						<>
 							<div className="parsely-persona-selector-label">

src/content-helper/common/components/tone-selector/component.tsx

@@ -8,7 +8,7 @@ import {
 	MenuItem,
 	TextControl,
 } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, edit } from '@wordpress/icons';
@@ -192,16 +192,21 @@ export const ToneSelector = ( {
 	disabled = false,
 	allowCustom = false,
 }: Readonly<ToneSelectorProps> ): React.JSX.Element => {
+	const togglePropsId = `parsely-tone-selector-${ useInstanceId( ToneSelector ) }`;
+
 	return (
 		<Disabled isDisabled={ disabled }>
-			<div className="wp-parsely-dropdown-label">{ label }</div>
+			<label htmlFor={ togglePropsId } className="wp-parsely-editor-sidebar-label">
+				{ label }
+			</label>
 			<DropdownMenu
 				label={ __( 'Tone', 'wp-parsely' ) }
 				className={ 'parsely-tone-selector-dropdown' + ( disabled ? ' is-disabled' : '' ) }
 				popoverProps={ {
 					className: 'wp-parsely-popover',
 				} }
 				toggleProps={ {
+					id: togglePropsId,
 					children: (
 						<>
 							<div className="parsely-tone-selector-label">

src/content-helper/common/css/common.scss

@@ -48,13 +48,14 @@
 	}
 }
 
-.wp-parsely-dropdown-label {
+.wp-parsely-editor-sidebar-label {
+	// Replicate native label styles.
 	align-self: stretch;
 	color: var(--sidebar-black);
 	font-size: var(--font-size--smaller);
 	font-style: normal;
-	font-weight: 600;
-	line-height: var(--grid-unit-20);
+	font-weight: 500;
+	line-height: 1.4;
 	text-transform: uppercase;
 }
 

src/content-helper/editor-sidebar/excerpt-suggestions/component-panel.tsx

@@ -245,7 +245,7 @@ export const PostExcerptSuggestions = ( {
 						variant="link"
 						rel="noopener"
 					>
-						{ __( 'Learn more about Parse.ly AI', 'wp-parsely' ) }
+						{ __( 'Learn more about Excerpt Suggestions', 'wp-parsely' ) }
 						<Icon icon={ external } size={ 18 } className="parsely-external-link-icon" />
 					</Button>
 				</div>
@@ -350,7 +350,7 @@ export const PostExcerptSuggestions = ( {
 						<div className="excerpt-suggestions-generate">
 							<Button
 								onClick={ generateExcerpt }
-								variant="primary"
+								variant="secondary"
 								isBusy={ isLoading }
 								disabled={ isLoading || ! postContent }
 							>
@@ -373,7 +373,7 @@ export const PostExcerptSuggestions = ( {
 						variant="link"
 						rel="noopener"
 					>
-						{ __( 'Learn more about Parse.ly AI', 'wp-parsely' ) }
+						{ __( 'Learn more about Excerpt Suggestions', 'wp-parsely' ) }
 						<Icon
 							icon={ external }
 							size={ 18 }

src/content-helper/editor-sidebar/performance-stats/component.tsx

@@ -309,7 +309,7 @@ export const PerformanceStats = (
 			{ window.wpParselyPostUrl && (
 				<Button
 					className="wp-parsely-view-post"
-					variant={ 'primary' }
+					variant="secondary"
 					onClick={ () => {
 						Telemetry.trackEvent( 'editor_sidebar_view_post_pressed' );
 					} }

src/content-helper/editor-sidebar/smart-linking/component.tsx

@@ -675,7 +675,7 @@ export const SmartLinkingPanel = ( {
 						target="_blank"
 						variant="link"
 					>
-						{ __( 'Learn more about Parse.ly AI', 'wp-parsely' ) }
+						{ __( 'Learn more about Smart Linking', 'wp-parsely' ) }
 						<Icon icon={ external } size={ 18 } className="parsely-external-link-icon" />
 					</Button>
 				</div>
@@ -709,7 +709,7 @@ export const SmartLinkingPanel = ( {
 				<div className="smart-linking-generate">
 					<Button
 						onClick={ generateSmartLinks }
-						variant="primary"
+						variant="secondary"
 						isBusy={ loading }
 						disabled={ loading }
 					>

src/content-helper/editor-sidebar/smart-linking/review-modal/component-modal.tsx

@@ -515,7 +515,7 @@ const SmartLinkingReviewModalComponent = ( {
 						<Button variant="secondary" onClick={ () => onCloseConfirmCloseDialog( false ) }>
 							{ __( 'Go Back', 'wp-parsely' ) }
 						</Button>
-						<Button variant="primary" onClick={ () => onCloseConfirmCloseDialog( true ) }>
+						<Button variant="secondary" isDestructive onClick={ () => onCloseConfirmCloseDialog( true ) }>
 							{ __( 'Close', 'wp-parsely' ) }
 						</Button>
 					</div>

src/content-helper/editor-sidebar/smart-linking/review-modal/component-suggestion.tsx

@@ -283,7 +283,7 @@ export const ReviewSuggestion = ( {
 									className="wp-parsely-review-suggestion-reject"
 									icon={ closeSmall }
 									onClick={ onReject }
-									variant={ 'secondary' }>
+									variant="secondary">
 									{ __( 'Reject', 'wp-parsely' ) }
 								</Button>
 							</Tooltip>
@@ -306,7 +306,7 @@ export const ReviewSuggestion = ( {
 									className="wp-parsely-review-suggestion-reject"
 									icon={ closeSmall }
 									onClick={ onRemove }
-									variant={ 'secondary' }>
+									variant="secondary">
 									{ __( 'Remove', 'wp-parsely' ) }
 								</Button>
 							</Tooltip>

src/content-helper/editor-sidebar/title-suggestions/component-title-suggestion.tsx

@@ -221,7 +221,7 @@ export const TitleSuggestion = (
 							<Button onClick={ closeModal } variant="secondary">
 								{ __( 'Cancel', 'wp-parsely' ) }
 							</Button>
-							<Button onClick={ onClickReplace } variant="primary">
+							<Button onClick={ onClickReplace } variant="secondary">
 								{ __( 'Replace', 'wp-parsely' ) }
 							</Button>
 						</div>

src/content-helper/editor-sidebar/title-suggestions/component.tsx

@@ -230,7 +230,7 @@ export const TitleSuggestionsPanel = (): React.JSX.Element => {
 						target="_blank"
 						variant="link"
 					>
-						{ __( 'Learn more about Parse.ly AI', 'wp-parsely' ) }
+						{ __( 'Learn more about Title Suggestions', 'wp-parsely' ) }
 						<Icon
 							icon={ external }
 							size={ 18 }
@@ -286,7 +286,7 @@ export const TitleSuggestionsPanel = (): React.JSX.Element => {
 				/>
 				<div className="title-suggestions-generate">
 					<Button
-						variant="primary"
+						variant="secondary"
 						isBusy={ loading }
 						disabled={ loading || tone === 'custom' || persona === 'custom' }
 						onClick={ generateOnClickHandler }