feat: replace hardcoded IDs with useId for accessibility improvements in various components

src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useId } from 'react'
 import { __ } from '@wordpress/i18n'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 import { SubmitSnippetAction, useSubmitSnippet } from '../../../../hooks/useSubmitSnippet'
@@ -7,10 +7,11 @@ import { handleUnknownError } from '../../../../utils/errors'
 export const ActivationSwitch = () => {
 	const { snippet, isWorking } = useSnippetForm()
 	const { submitSnippet } = useSubmitSnippet()
+	const activationSwitchId = useId()
 
 	return (
 		<div className="inline-form-field activation-switch-container">
-			<label htmlFor="activation-switch" id="snippet-activation-switch-label">
+			<label htmlFor={activationSwitchId} id="snippet-activation-switch-label">
 				{__('Status', 'code-snippets')}
 			</label>
 
@@ -21,7 +22,7 @@ export const ActivationSwitch = () => {
 			</span>
 
 			<input
-				id="activation-switch"
+				id={activationSwitchId}
 				type="checkbox"
 				checked={snippet.active}
 				disabled={isWorking || !!snippet.shared_network}

src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx

@@ -1,14 +1,15 @@
-import React from 'react'
+import React, { useId } from 'react'
 import { __ } from '@wordpress/i18n'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 import { Tooltip } from '../../../common/Tooltip'
 
 export const MultisiteSharingSettings: React.FC = () => {
 	const { snippet, setSnippet, isReadOnly } = useSnippetForm()
+	const sharingId = useId()
 
 	return (
 		<div className="inline-form-field activation-switch-container">
-			<label htmlFor="snippet_sharing" id="snippet-sharing-label">
+			<label htmlFor={sharingId} id="snippet-sharing-label">
 				{__('Share with Subsites', 'code-snippets')}
 			</label>
 
@@ -23,7 +24,7 @@ export const MultisiteSharingSettings: React.FC = () => {
 			</span>
 
 			<input
-				id="snippet_sharing"
+				id={sharingId}
 				name="snippet_sharing"
 				type="checkbox"
 				className="switch"

src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx

@@ -1,14 +1,15 @@
-import React from 'react'
+import React, { useId } from 'react'
 import { __ } from '@wordpress/i18n'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 import { Tooltip } from '../../../common/Tooltip'
 
 export const PriorityInput = () => {
 	const { snippet, isReadOnly, setSnippet } = useSnippetForm()
+	const priorityId = useId()
 
 	return (
 		<div className="snippet-priority inline-form-field">
-			<label htmlFor="snippet-priority" id="snippet-priority-label">
+			<label htmlFor={priorityId} id="snippet-priority-label">
 				{__('Priority', 'code-snippets')}
 			</label>
 
@@ -18,7 +19,7 @@ export const PriorityInput = () => {
 
 			<input
 				type="number"
-				id="snippet-priority"
+				id={priorityId}
 				name="snippet_priority"
 				value={snippet.priority}
 				disabled={isReadOnly}

src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx

@@ -1,17 +1,18 @@
-import React from 'react'
+import React, { useId } from 'react'
 import { __ } from '@wordpress/i18n'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 
 export const RTLControl: React.FC = () => {
 	const { codeEditorInstance } = useSnippetForm()
+	const directionId = useId()
 
 	return (
 		<div className="inline-form-field">
-			<label htmlFor="snippet-code-direction">
+			<label htmlFor={directionId}>
 				{__('Code Direction', 'code-snippets')}
 			</label>
 
-			<select id="snippet-code-direction" onChange={event =>
+			<select id={directionId} onChange={event =>
 				codeEditorInstance?.codemirror.setOption('direction', 'rtl' === event.target.value ? 'rtl' : 'ltr')
 			}>
 				<option value="ltr">{__('LTR', 'code-snippets')}</option>

src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx

@@ -12,6 +12,7 @@ import type { Dispatch, RefObject, SetStateAction } from 'react'
 
 interface EditorTextareaProps {
 	textareaRef: RefObject<HTMLTextAreaElement>
+	snippetCodeId: string
 }
 
 const useFocusEditorShortcut = (
@@ -37,7 +38,7 @@ const useFocusEditorShortcut = (
 	}, [codeEditorInstance, textareaRef])
 }
 
-const EditorTextarea: React.FC<EditorTextareaProps> = ({ textareaRef }) => {
+const EditorTextarea: React.FC<EditorTextareaProps> = ({ textareaRef, snippetCodeId }) => {
 	const descriptionId = useId()
 	const { snippet, setSnippet } = useSnippetForm()
 
@@ -53,7 +54,7 @@ const EditorTextarea: React.FC<EditorTextareaProps> = ({ textareaRef }) => {
 			</p>
 			<textarea
 				ref={textareaRef}
-				id="snippet-code"
+				id={snippetCodeId}
 				name="snippet_code"
 				value={snippet.code}
 				aria-label={__('Snippet code', 'code-snippets')}
@@ -77,6 +78,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 	const { snippet, setSnippet, codeEditorInstance, setCodeEditorInstance } = useSnippetForm()
 	const { submitSnippet } = useSubmitSnippet()
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const snippetCodeId = useId()
 
 	useEffect(() => {
 		setCodeEditorInstance(editorInstance => {
@@ -115,7 +117,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 	return (
 		<div className="snippet-code-container">
 			<div className="above-snippet-code">
-				<label htmlFor="snippet-code">
+				<label htmlFor={snippetCodeId}>
 					{__('Snippet Content', 'code-snippets')}
 				</label>
 
@@ -125,7 +127,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 				</Button>
 			</div>
 
-			<EditorTextarea textareaRef={textareaRef} />
+			<EditorTextarea textareaRef={textareaRef} snippetCodeId={snippetCodeId} />
 		</div>
 	)
 }

src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n'
-import React from 'react'
+import React, { useId } from 'react'
 import Select from 'react-select'
 import { useSnippetForm } from '../WithSnippetFormContext'
 import { SNIPPET_TYPE_SCOPES } from '../../../../types/Snippet'
@@ -39,6 +39,7 @@ const SCOPE_DESCRIPTIONS: Record<SnippetCodeScope, string> = {
 
 export const SnippetLocationInput: React.FC = () => {
 	const { snippet, setSnippet, isReadOnly } = useSnippetForm()
+	const locationId = useId()
 
 	const options: SelectOption<SnippetCodeScope>[] = SNIPPET_TYPE_SCOPES[getSnippetType(snippet)]
 		.filter(scope => 'condition' !== scope)
@@ -51,12 +52,12 @@ export const SnippetLocationInput: React.FC = () => {
 	return isCondition(snippet)
 		? null
 		: <div className="block-form-field">
-			<label htmlFor="snippet-location">
+			<label htmlFor={locationId}>
 				{__('Location', 'code-snippets')}
 			</label>
 
 			<Select
-				inputId="snippet-location"
+				inputId={locationId}
 				className="code-snippets-select code-snippets-select-location"
 				options={options}
 				isSearchable={false}

src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useId } from 'react'
 import classnames from 'classnames'
 import { __, _x } from '@wordpress/i18n'
 import Select from 'react-select'
@@ -62,6 +62,7 @@ const SnippetTypeOption: React.FC<SnippetTypeOptionProps> = ({
 export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgradeDialogOpen }) => {
 	const { snippet, setSnippet, codeEditorInstance, isReadOnly } = useSnippetForm()
 	const snippetType = getSnippetType(snippet)
+	const snippetTypeId = useId()
 
 	useEffect(() => {
 		if (codeEditorInstance) {
@@ -81,11 +82,11 @@ export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgrade
 
 	return (
 		<div className="snippet-type-container">
-			<label htmlFor="snippet-type-select-input" className="screen-reader-text">
+			<label htmlFor={snippetTypeId} className="screen-reader-text">
 				{__('Snippet Type', 'code-snippets')}
 			</label>
 			<Select<SelectOption<SnippetType>>
-				inputId="snippet-type-select-input"
+				inputId={snippetTypeId}
 				className="code-snippets-select"
 				isSearchable={false}
 				isDisabled={isReadOnly || 0 !== snippet.id && 'cond' === snippetType}

src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useId } from 'react'
 import { __, sprintf } from '@wordpress/i18n'
 import { ImportCard } from '../common/ImportCard'
 import type { Importer } from './WithMigrationData'
@@ -10,34 +10,39 @@ export interface ImporterSelectorProps {
 	options: Importer[]
 }
 
-export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) =>
-	<ImportCard variant="controls" className="importer-selector-card">
-		<h2 id="importer-select-heading">{__('Select plugin', 'code-snippets')}</h2>
-		<label htmlFor="importer-select" className="screen-reader-text">
-			{__('Select plugin to migrate from', 'code-snippets')}
-		</label>
+export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) => {
+	const importerId = useId()
 
-		<select
-			aria-labelledby="importer-select-heading"
-			id="importer-select"
-			value={value}
-			onChange={event => onChange(event.target.value)}
-			className="regular-text"
-			disabled={isLoading}
-		>
-			<option value="">{__('-- Select an importer --', 'code-snippets')}</option>
-			{options.map(importer =>
-				<option
-					key={importer.name}
-					value={importer.name}
-					disabled={!importer.is_active}
-				>
-					{importer.is_active
-						? importer.title
-						// translators: %s: importer title.
-						: sprintf(__('%s (Inactive)', 'code-snippets'), importer.title)}
-				</option>)}
-		</select>
+	return (
+		<ImportCard variant="controls" className="importer-selector-card">
+			<h2 id="importer-select-heading">{__('Select plugin', 'code-snippets')}</h2>
+			<label htmlFor={importerId} className="screen-reader-text">
+				{__('Select plugin to migrate from', 'code-snippets')}
+			</label>
 
-		{isLoading && <p role="status" aria-live="polite">{__('Loading snippets…', 'code-snippets')}</p>}
-	</ImportCard>
+			<select
+				aria-labelledby="importer-select-heading"
+				id={importerId}
+				value={value}
+				onChange={event => onChange(event.target.value)}
+				className="regular-text"
+				disabled={isLoading}
+			>
+				<option value="">{__('-- Select an importer --', 'code-snippets')}</option>
+				{options.map(importer =>
+					<option
+						key={importer.name}
+						value={importer.name}
+						disabled={!importer.is_active}
+					>
+						{importer.is_active
+							? importer.title
+							// translators: %s: importer title.
+							: sprintf(__('%s (Inactive)', 'code-snippets'), importer.title)}
+					</option>)}
+			</select>
+
+			{isLoading && <p role="status" aria-live="polite">{__('Loading snippets…', 'code-snippets')}</p>}
+		</ImportCard>
+	)
+}

src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useId, useState } from 'react'
 import classnames from 'classnames'
 import { Spinner } from '@wordpress/components'
 import { useRestAPI } from '../../../hooks/useRestAPI'
@@ -19,6 +19,7 @@ import type { Dispatch, FormEventHandler, SetStateAction } from 'react'
 
 const SearchBox = () => {
 	const { searchParams, updateSearchParams, isSearching, doSearch } = useCloudSearch()
+	const searchMethodId = useId()
 
 	const handleSubmit: FormEventHandler<HTMLFormElement> = event => {
 		event.preventDefault()
@@ -27,11 +28,11 @@ const SearchBox = () => {
 
 	return (
 		<form className="cloud-search-form" onSubmit={handleSubmit}>
-			<label className="screen-reader-text" htmlFor="cloud-search-method">
+			<label htmlFor={searchMethodId} className="screen-reader-text">
 				{__('Search method', 'code-snippets')}
 			</label>
 			<select
-				id="cloud-search-method"
+				id={searchMethodId}
 				value={searchParams.method}
 				onChange={event =>
 					updateSearchParams({ method: 'codevault' === event.target.value ? 'codevault' : 'term' })}

src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx

@@ -1,5 +1,5 @@
 import { __, _x, sprintf } from '@wordpress/i18n'
-import React, { Fragment, useMemo } from 'react'
+import React, { Fragment, useId, useMemo } from 'react'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { useSnippetsList } from '../../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../../utils/errors'
@@ -84,6 +84,7 @@ interface FilterByTagControlProps {
 
 const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets }) => {
 	const { currentTag, setCurrentTag } = useSnippetsFilters()
+	const tagFilterId = useId()
 
 	const tagsList: Set<string> = useMemo(
 		() => visibleSnippets.reduce((tags, snippet) => {
@@ -94,11 +95,11 @@ const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets
 
 	return 0 < tagsList.size
 		? <div className="alignleft actions">
-			<label htmlFor="snippets-tag-filter" className="screen-reader-text">
+			<label htmlFor={tagFilterId} className="screen-reader-text">
 				{__('Filter snippets by tag', 'code-snippets')}
 			</label>
 			<select
-				id="snippets-tag-filter"
+				id={tagFilterId}
 				name="tag"
 				value={currentTag}
 				aria-label={__('Filter snippets by tag', 'code-snippets')}