feat: Assess and improve accessibility#198
Open
cheryl7114 wants to merge 4 commits into
Open
Conversation
added 3 commits
June 24, 2026 10:25
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses Issue #180 by improving the diagram editor’s accessibility through additional ARIA attributes, improved landmark semantics, and better screen reader support across core UI components.
Changes:
- Adds language identification to the editor root (
lang={locale}). - Improves labeling of interactive and informational UI elements (minimap toggle, node badges, side panel).
- Adds live alert semantics for error rendering and hides selected decorative icons from assistive technologies.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx | Adds landmark roles/labels and hides decorative icons in the side panel UI. |
| packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx | Adds an accessible label for custom/unknown task badges. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx | Adds an ARIA label to the minimap toggle control. |
| packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/ErrorPage.tsx | Announces errors via an assertive live alert region. |
| packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx | Adds a lang attribute to the editor root container. |
| .changeset/improve-accessibility.md | Publishes the accessibility improvements as a minor release. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>
cheryl7114
requested review from
fantonangeli,
handreyrc,
kumaradityaraj and
lornakelly
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.
Closes #180
Summary
This PR enhances the accessibility of the Editor by adding proper ARIA attributes, semantic HTML roles, and improved screen reader support across key components.
Changes