Fix: update snippet add/edit screen markup & headings structure#360
Merged
rami-elementor merged 2 commits intocore-betafrom Apr 23, 2026
Merged
Fix: update snippet add/edit screen markup & headings structure#360rami-elementor merged 2 commits intocore-betafrom
rami-elementor merged 2 commits intocore-betafrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the snippet add/edit UI markup to improve heading structure and label semantics across the React-driven admin screens, with accompanying CSS adjustments to preserve layout and visual hierarchy.
Changes:
- Refactors several field headers from heading tags (
h2/h3/h4) into proper<label>/<strong>elements and updates the edit screen title heading level. - Improves accessibility metadata (e.g., adds region labeling for the upsell banner, adds an aria-label to the dismiss button).
- Adjusts sidebar and form styles to support the new markup structure and spacing.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/js/components/common/UpsellBanner.tsx | Adds region semantics and labeling for the upsell banner and improves dismiss button accessibility text. |
| src/js/components/EditMenu/SnippetForm/page/PageHeading.tsx | Changes the edit screen heading element level. |
| src/js/components/EditMenu/SnippetForm/fields/TagsEditor.tsx | Moves “Snippet Tags” labeling into the FormTokenField label prop. |
| src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx | Converts a heading-wrapped label into a direct <label> for the select input. |
| src/js/components/EditMenu/SnippetForm/fields/NameInput.tsx | Refines the screen-reader label text for the snippet name field. |
| src/js/components/EditMenu/SnippetForm/fields/DescriptionEditor.tsx | Converts heading-wrapped label into a direct <label> for the description editor textarea. |
| src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx | Converts heading-wrapped label into a direct <label> for the code editor textarea. |
| src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx | Removes heading wrapper and uses a direct <label> for the select control. |
| src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx | Removes heading wrapper and tweaks tooltip styling hook. |
| src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx | Restructures label/status/switch markup for better semantics and layout control. |
| src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx | Restructures label/status/switch markup for better semantics and layout control. |
| src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx | Restructures label/status/switch markup and keeps activation behavior. |
| src/js/components/EditMenu/EditorSidebar/actions/ShortcodeInfo.tsx | Fixes invalid heading nesting in modal content and adjusts sidebar label markup. |
| src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx | Adjusts “Conditions” header markup and switches container class for inline layout. |
| src/css/edit/_sidebar.scss | Updates sidebar flex/layout rules to match the new markup and badge positioning. |
| src/css/edit/_gpt.scss | Adds label styling for the tags editor area. |
| src/css/edit/_form.scss | Updates conditions editor button layout behavior and adds upper/lower form spacing. |
| src/css/edit.scss | Adds label styling for description/code areas and removes some legacy spacing rules. |
…itch.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
louiswol94
approved these changes
Apr 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix heading structure - remove
<h2>,<h3>,<h4>tags - replace withlabeltags.Now, clicking the labels also affects the input/select/checkbox elements.
Keyboard navigation is simpler now and the accessibility tree is clearer.