Skip to content

Adds a warning message in the Issues Panel when a content creator uses a widget marked as inaccessible #2474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
May 19, 2025

Conversation

tatianasnook
Copy link
Contributor

Summary:

Content creators should be warned when adding widgets marked as inaccessible (accessible: false) so they can make informed choices that support all learners.

We initially implemented checkAccessibilityAndWarn logic directly in editor.tsx, but later moved it into a custom Persues linter rule. This change allows for consistent, centralized warnings in the Issues Panel using the existing linter infrastructure.

Issue: LEMS-2972

tatianasnook and others added 17 commits April 21, 2025 14:29
… message in the Issues Panel when a content creator selects or pastes a widget with accessible: false.Changes include:Detect
…holding off on linter refactor pending discussion
…holding off on linter refactor pending discussion
Copy link
Contributor

github-actions bot commented May 12, 2025

Size Change: +895 B (+0.21%)

Total Size: 424 kB

Filename Size Change
packages/perseus-core/dist/es/index.js 18.4 kB +52 B (+0.28%)
packages/perseus-editor/dist/es/index.js 90 kB +754 B (+0.84%)
packages/perseus-linter/dist/es/index.js 7.14 kB +89 B (+1.26%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.7 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 5.98 kB
packages/math-input/dist/es/index.js 57.1 kB
packages/math-input/dist/es/strings.js 1.61 kB
packages/perseus-score/dist/es/index.js 9.04 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/index.js 199 kB
packages/perseus/dist/es/strings.js 6.13 kB
packages/pure-markdown/dist/es/index.js 1.22 kB
packages/simple-markdown/dist/es/index.js 6.71 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented May 12, 2025

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (3cd6791) and published it to npm. You
can install it using the tag PR2474.

Example:

pnpm add @khanacademy/perseus@PR2474

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.js -t PR2474

@tatianasnook tatianasnook changed the title docs(changeset): This PR adds a warning message in the Issues Panel when a content creator selects or pastes a widget with accessible: false docs(changeset): Adds a warning message in the Issues Panel when a content creator selects or pastes a widget with accessible: false May 14, 2025
@tatianasnook tatianasnook changed the title docs(changeset): Adds a warning message in the Issues Panel when a content creator selects or pastes a widget with accessible: false docs(changeset): Adds a warning message in the Issues Panel when a content creator selects or pastes inaccessible widget May 14, 2025
@tatianasnook tatianasnook changed the title docs(changeset): Adds a warning message in the Issues Panel when a content creator selects or pastes inaccessible widget Adds a warning message in the Issues Panel when a content creator selects inaccessible widget May 14, 2025
@tatianasnook tatianasnook changed the title Adds a warning message in the Issues Panel when a content creator selects inaccessible widget Adds a warning message in the Issues Panel when a content creator uses a widget marked as inaccessible May 14, 2025
Copy link
Member

@catandthemachines catandthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything is looking nice and clean! I added a few comments for things to fix, once those are fixed with the linting errors are resolved you should be good to complete.

Copy link
Collaborator

@jeremywiebe jeremywiebe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work Tatiana. I have a long-ish comment about the use of static to hold the previous prop values. But I think we can address that by migrating the ItemEditor component to be a functional component. So approving now with the understanding we'll port it as part of this project.

@tatianasnook tatianasnook merged commit 59a2e87 into feature/peich May 19, 2025
8 checks passed
@tatianasnook tatianasnook deleted the inaccessible-widget-warning branch May 19, 2025 17:17
catandthemachines added a commit that referenced this pull request Jun 5, 2025
PR to merge several changes from PEICH project thus far and expose new editor functionality for our content creators.

All of the changes included have been approved through the PR process. This is simply a formal commit to add to Perseus main now that we're ready to release to content.
- Issues Panel (#2377)
- Adds a warning message in the Issues Panel when a content creator uses a widget marked as inaccessible (#2474)
- Migrate accessibility logic from perseus to perseus-core (#2485)
- Add a basic FreeResponse widget (#2273)
- Add scoring criteria to Free Response Widget (#2286)
- [Free Response Widget] Add ability to customize placeholder (#2297)
- [Free Response Widget] Add optional character limit support (#2332)
- Render TeX in Free Response Widget questions (#2453)
- Update Free Response styles and accessibility (#2486)
- Use LabeledField in FreeResponseEditor (#2493)
- Add Free Response scoring and validation functions (#2498)
- Changeset: Release the new Free Response Widget (#2501)
- Version Packages (#2500)
- Add story for radio widget single select with images and scroll (#2494)
- Update to latest WB packages (#2455)
- Wonder Blocks: Updates WB Button instances to match new API (color -> actionType) (#2491)
- Version Packages (#2506)
- Ensure that our parser can handle empty strings for labelLocation for Interactive Graphs (#2509)
- Add tab navigation to new radio widget (#2510)
- Add typesafe parser for Categorizer's user input type (#2516)
- Update label image widget to handle answerless data and do some cleanup (#2495)
- Remove preferred popover direction from Label Image editor (#2512)
- [feature/peich] Revert bad commits. :(
- Removing manual traversal. (#2517)
- [feature/peich] Exporting violatingWidgets.
- Pass data between EditorPage and ItemEditor via new props (#2526)
- Add isItemAccessible function and enhance types (#2532)
- docs(changeset): Move traversal tests from perseus-editor and perseus into perseus-core (#2544)
- [feature/peich] A few fixes from the merge with main.
- Adding partially inaccessible functions to InteractiveGraph and LabelImage. (#2553)
- [feature/peich] Reverting pnpm lock file changes.

Author: catandthemachines

Reviewers: mark-fitzgerald, ivyolamit, SonicScrewdriver, anakaren-rojas

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ 14 checks were successful

Pull Request URL: #2514
catandthemachines added a commit that referenced this pull request Jun 5, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @khanacademy/perseus@65.0.0

### Major Changes

- [#2485](#2485)
[`cea05d9e6`](cea05d9)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Migrate
accessibility logic from perseus to perseus-core

### Minor Changes

- [#2553](#2553)
[`f5d08b79a`](f5d08b7)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
Adding partically accessible widget function to interactive graph and
label image.


- [#2518](#2518)
[`0eba51c67`](0eba51c)
Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! -
Updates to Radio Scoring to ensure non-specific multiselect questions
are marked correctly.

### Patch Changes

- [#2517](#2517)
[`6da29d18b`](6da29d1)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
Removed unnecessary logic.

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0
    -   @khanacademy/perseus-linter@4.0.0
    -   @khanacademy/perseus-score@7.1.0
    -   @khanacademy/keypad-context@3.0.13
    -   @khanacademy/kmath@2.0.13
    -   @khanacademy/math-input@26.0.2

## @khanacademy/perseus-core@14.0.0

### Major Changes

- [#2485](#2485)
[`cea05d9e6`](cea05d9)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Migrate
accessibility logic from perseus to perseus-core


- [#2474](#2474)
[`59a2e87a8`](59a2e87)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Moved
checkAccessibilityAndWarn logic into a custom linter rule

### Minor Changes

- [#2553](#2553)
[`f5d08b79a`](f5d08b7)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
Adding partically accessible widget function to interactive graph and
label image.


- [#2532](#2532)
[`75f1d1f53`](75f1d1f)
Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Add
isItemAccessible helper which simplifies common usages of the
violatingWidgets() function


- [#2518](#2518)
[`0eba51c67`](0eba51c)
Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! -
Updates to Radio Scoring to ensure non-specific multiselect questions
are marked correctly.


- [#2526](#2526)
[`ab2861d83`](ab2861d)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Pass data
between EditorPage and ItemEditor via new props

### Patch Changes

- [#2544](#2544)
[`e60f6ac50`](e60f6ac)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Move deleted
traversal tests into perseus-core


- [#2545](#2545)
[`cec57bbc6`](cec57bb)
Thanks [@Myranae](https://github.com/Myranae)! - Add recursive typesafe
parser for Group's user input type with supporting utilities and widget
ID parsing refactor

## @khanacademy/perseus-editor@24.0.0

### Major Changes

- [#2474](#2474)
[`59a2e87a8`](59a2e87)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Moved
checkAccessibilityAndWarn logic into a custom linter rule


- [#2377](#2377)
[`8a15c154b`](8a15c15)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - This change
introduces the Issues Panel container (LEMS-2925), which displays a list
of accessibility warnings in the editor. Each warning includes a title,
description, impact, and message. The panel also uses icons to indicate
whether there are issues or if all checks have passed, improving
visibility and clarity for content creators.


- [#2526](#2526)
[`ab2861d83`](ab2861d)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Pass data
between EditorPage and ItemEditor via new props

### Minor Changes

- [#2553](#2553)
[`f5d08b79a`](f5d08b7)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
Adding partically accessible widget function to interactive graph and
label image.

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`6da29d18b`](6da29d1),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus@65.0.0
    -   @khanacademy/perseus-core@14.0.0
    -   @khanacademy/perseus-linter@4.0.0
    -   @khanacademy/perseus-score@7.1.0
    -   @khanacademy/keypad-context@3.0.13
    -   @khanacademy/kmath@2.0.13
    -   @khanacademy/math-input@26.0.2

## @khanacademy/perseus-linter@4.0.0

### Major Changes

- [#2474](#2474)
[`59a2e87a8`](59a2e87)
Thanks [@tatianasnook](https://github.com/tatianasnook)! - Moved
checkAccessibilityAndWarn logic into a custom linter rule

### Minor Changes

- [#2553](#2553)
[`f5d08b79a`](f5d08b7)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
Adding partically accessible widget function to interactive graph and
label image.

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0

## @khanacademy/perseus-score@7.1.0

### Minor Changes

- [#2518](#2518)
[`0eba51c67`](0eba51c)
Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! -
Updates to Radio Scoring to ensure non-specific multiselect questions
are marked correctly.

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0
    -   @khanacademy/kmath@2.0.13

## @khanacademy/keypad-context@3.0.13

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0

## @khanacademy/kmath@2.0.13

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0

## @khanacademy/math-input@26.0.2

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0
    -   @khanacademy/keypad-context@3.0.13

## @khanacademy/perseus-dev-ui@5.4.14

### Patch Changes

- Updated dependencies
\[[`f5d08b79a`](f5d08b7),
[`cea05d9e6`](cea05d9),
[`e60f6ac50`](e60f6ac),
[`75f1d1f53`](75f1d1f),
[`0eba51c67`](0eba51c),
[`59a2e87a8`](59a2e87),
[`ab2861d83`](ab2861d),
[`cec57bbc6`](cec57bb)]:
    -   @khanacademy/perseus-core@14.0.0
    -   @khanacademy/perseus-linter@4.0.0
    -   @khanacademy/kmath@2.0.13
    -   @khanacademy/math-input@26.0.2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants