← All changes | js/components/ImportMenu/MigrateForm/ImporterSelector.tsx +35 -30 3.10.0-beta.1 → trunk View file →

		@@ -1,5 +1,5 @@
1		-import React from 'react'
	1	+import React, { useId } from 'react'
2	2	import { __, sprintf } from '@wordpress/i18n'
3	3	import { ImportCard } from '../common/ImportCard'
4	4	import type { Importer } from './WithMigrationData'
5	5
		@@ -9,35 +9,40 @@
9	9	isLoading: boolean
10	10	options: Importer[]
11	11	}
12	12
13		-export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) =>
14		- <ImportCard variant="controls" className="importer-selector-card">
15		- <h3 id="importer-select-heading">{__('Select plugin', 'code-snippets')}</h3>
16		- <label htmlFor="importer-select" className="screen-reader-text">
17		- {__('Select plugin to migrate from', 'code-snippets')}
18		- </label>
	13	+export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) => {
	14	+ const importerId = useId()
19	15
20		- <select
21		- aria-labelledby="importer-select-heading"
22		- id="importer-select"
23		- value={value}
24		- onChange={event => onChange(event.target.value)}
25		- className="regular-text"
26		- disabled={isLoading}
27		- >
28		- <option value="">{__('-- Select an importer --', 'code-snippets')}</option>
29		- {options.map(importer =>
30		- <option
31		- key={importer.name}
32		- value={importer.name}
33		- disabled={!importer.is_active}
34		- >
35		- {importer.is_active
36		- ? importer.title
37		- // translators: %s: importer title.
38		- : sprintf(__('%s (Inactive)', 'code-snippets'), importer.title)}
39		- </option>)}
40		- </select>
	16	+ return (
	17	+ <ImportCard variant="controls" className="importer-selector-card">
	18	+ <h2 id="importer-select-heading">{__('Select plugin', 'code-snippets')}</h2>
	19	+ <label htmlFor={importerId} className="screen-reader-text">
	20	+ {__('Select plugin to migrate from', 'code-snippets')}
	21	+ </label>
41	22
42		- {isLoading && <p role="status" aria-live="polite">{__('Loading snippets…', 'code-snippets')}</p>}
43		- </ImportCard>
	23	+ <select
	24	+ aria-labelledby="importer-select-heading"
	25	+ id={importerId}
	26	+ value={value}
	27	+ onChange={event => onChange(event.target.value)}
	28	+ className="regular-text"
	29	+ disabled={isLoading}
	30	+ >
	31	+ <option value="">{__('-- Select an importer --', 'code-snippets')}</option>
	32	+ {options.map(importer =>
	33	+ <option
	34	+ key={importer.name}
	35	+ value={importer.name}
	36	+ disabled={!importer.is_active}
	37	+ >
	38	+ {importer.is_active
	39	+ ? importer.title
	40	+ // translators: %s: importer title.
	41	+ : sprintf(__('%s (Inactive)', 'code-snippets'), importer.title)}
	42	+ </option>)}
	43	+ </select>
	44	+
	45	+ {isLoading && <p role="status" aria-live="polite">{__('Loading snippets…', 'code-snippets')}</p>}
	46	+ </ImportCard>
	47	+ )
	48	+}