← All changes
|
js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx
+4
-3
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 { __ } from '@wordpress/i18n' |
| 3 | 3 | import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext' |
| 4 | 4 | import { SubmitSnippetAction, useSubmitSnippet } from '../../../../hooks/useSubmitSnippet' |
| 5 | 5 | import { handleUnknownError } from '../../../../utils/errors' |
| @@ -6,12 +6,13 @@ | ||
| 6 | 6 | |
| 7 | 7 | export const ActivationSwitch = () => { |
| 8 | 8 | const { snippet, isWorking } = useSnippetForm() |
| 9 | 9 | const { submitSnippet } = useSubmitSnippet() |
| 10 | + const activationSwitchId = useId() | |
| 10 | 11 | |
| 11 | 12 | return ( |
| 12 | 13 | <div className="inline-form-field activation-switch-container"> |
| 13 | - <label htmlFor="activation-switch" id="snippet-activation-switch-label"> | |
| 14 | + <label htmlFor={activationSwitchId} id="snippet-activation-switch-label"> | |
| 14 | 15 | {__('Status', 'code-snippets')} |
| 15 | 16 | </label> |
| 16 | 17 | |
| 17 | 18 | <span className="status-text"> |
| @@ -20,9 +21,9 @@ | ||
| 20 | 21 | : __('Inactive', 'code-snippets')} |
| 21 | 22 | </span> |
| 22 | 23 | |
| 23 | 24 | <input |
| 24 | - id="activation-switch" | |
| 25 | + id={activationSwitchId} | |
| 25 | 26 | type="checkbox" |
| 26 | 27 | checked={snippet.active} |
| 27 | 28 | disabled={isWorking || !!snippet.shared_network} |
| 28 | 29 | className="switch" |