Skip to content
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

[a11y] Hide horizontal divider from screen reader #1283

Merged
merged 3 commits into from
May 24, 2024
Merged

Conversation

daniellewhyte
Copy link
Contributor

@daniellewhyte daniellewhyte commented May 16, 2024

Summary:

When navigating through an exercise with a SR, it sometimes notices the horizontal divider as shown in the video below. This is most noticeable in long passage practice where the horizontal line is used to format the passage.

with.no.alt.text.mov

This PR adds aria-hidden to the horizontal line, so the screen reader will skip over it.

Issue: LIT-754

Test plan:

  • Tests pass
  • Here is how things would look in webapp:
LIT-754.mov

@daniellewhyte daniellewhyte self-assigned this May 16, 2024
Copy link
Contributor

github-actions bot commented May 16, 2024

Size Change: +119 B (+0.01%)

Total Size: 839 kB

Filename Size Change
packages/perseus-editor/dist/es/index.js 268 kB +99 B (+0.04%)
packages/perseus/dist/es/index.js 403 kB -9 B (0%)
packages/simple-markdown/dist/es/index.js 12.4 kB +29 B (+0.23%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 38.1 kB
packages/kmath/dist/es/index.js 4.27 kB
packages/math-input/dist/es/index.js 80.5 kB
packages/math-input/dist/es/strings.js 1.73 kB
packages/perseus-core/dist/es/index.js 908 B
packages/perseus-error/dist/es/index.js 877 B
packages/perseus-linter/dist/es/index.js 21.8 kB
packages/perseus/dist/es/strings.js 3.22 kB
packages/pure-markdown/dist/es/index.js 3.68 kB

compressed-size-action

Copy link

codecov bot commented May 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.86%. Comparing base (fffd130) to head (2326c53).
Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1283      +/-   ##
==========================================
+ Coverage   68.78%   70.86%   +2.08%     
==========================================
  Files         476      481       +5     
  Lines      101772   101876     +104     
  Branches     5072    10387    +5315     
==========================================
+ Hits        69999    72198    +2199     
+ Misses      31658    29678    -1980     
+ Partials      115        0     -115     

Impacted file tree graph

Files Coverage Δ
packages/simple-markdown/src/index.ts 94.95% <100.00%> (+0.19%) ⬆️

... and 132 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fffd130...2326c53. Read the comment docs.

@daniellewhyte daniellewhyte changed the title Hide horizontal divider from screen reader [a11y] Hide horizontal divider from screen reader May 16, 2024
@daniellewhyte daniellewhyte changed the title [a11y] Hide horizontal divider from screen reader (WIP)[a11y] Hide horizontal divider from screen reader May 16, 2024
@daniellewhyte daniellewhyte marked this pull request as ready for review May 16, 2024 21:05
@khan-actions-bot khan-actions-bot requested a review from a team May 16, 2024 21:05
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/perseus for changes to .changeset/chilled-moose-walk.md, packages/simple-markdown/src/index.ts, packages/simple-markdown/src/__tests__/simple-markdown.test.ts, packages/perseus/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

@daniellewhyte daniellewhyte changed the title (WIP)[a11y] Hide horizontal divider from screen reader [a11y] Hide horizontal divider from screen reader May 16, 2024
Copy link
Contributor

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1283

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

./dev/tools/bump_perseus_version.sh -t PR1283

Copy link
Member

@benchristel benchristel left a comment

Choose a reason for hiding this comment

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

LGTM! Thank you!

@daniellewhyte daniellewhyte merged commit 3b85777 into main May 24, 2024
42 of 54 checks passed
@daniellewhyte daniellewhyte deleted the LIT-754_hr-a11y branch May 24, 2024 22:12
benchristel pushed a commit that referenced this pull request May 28, 2024
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@23.0.0

### Major Changes

-   [#1301](#1301) [`1ca5a12aa`](1ca5a12) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove unused/deprecated APIOptions: useDraftEditor and inModal

### Minor Changes

-   [#1283](#1283) [`3b85777c7`](3b85777) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Make horizontal divider invisible to screen reader


-   [#1305](#1305) [`ec600a11e`](ec600a1) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of the new Mafs-based Quadratic Graph for the Interactive Graph Widget


-   [#1310](#1310) [`e6fc912bf`](e6fc912) Thanks [@benchristel](https://github.com/benchristel)! - Upgrade to Mafs 0.18.7, which lets us draw graph axes with thicker lines.

### Patch Changes

-   [#1312](#1312) [`925f4ee03`](925f4ee) Thanks [@benchristel](https://github.com/benchristel)! - Fix Safari-specific bug where axis tick numbers did not appear


-   [#1301](#1301) [`1ca5a12aa`](1ca5a12) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove duplicate `Empty` type

-   Updated dependencies \[[`3b85777c7`](3b85777)]:
    -   @khanacademy/simple-markdown@0.12.0
    -   @khanacademy/pure-markdown@0.3.5

## @khanacademy/perseus-editor@6.6.0

### Minor Changes

-   [#1298](#1298) [`b84e4a981`](b84e4a9) Thanks [@nishasy](https://github.com/nishasy)! - [Interactive Graph Editor] Setting a locked line's length to 0 (equal points) will stop the exercise from saving via getSaveWarnings()


-   [#1305](#1305) [`ec600a11e`](ec600a1) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Creation of the new Mafs-based Quadratic Graph for the Interactive Graph Widget

### Patch Changes

-   [#1301](#1301) [`1ca5a12aa`](1ca5a12) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove duplicate `Empty` type

-   Updated dependencies \[[`1ca5a12aa`](1ca5a12), [`3b85777c7`](3b85777), [`ec600a11e`](ec600a1), [`925f4ee03`](925f4ee), [`1ca5a12aa`](1ca5a12), [`e6fc912bf`](e6fc912)]:
    -   @khanacademy/perseus@23.0.0

## @khanacademy/simple-markdown@0.12.0

### Minor Changes

-   [#1283](#1283) [`3b85777c7`](3b85777) Thanks [@daniellewhyte](https://github.com/daniellewhyte)! - Make horizontal divider invisible to screen reader

## @khanacademy/pure-markdown@0.3.5

### Patch Changes

-   Updated dependencies \[[`3b85777c7`](3b85777)]:
    -   @khanacademy/simple-markdown@0.12.0

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

### Patch Changes

-   Updated dependencies \[[`3b85777c7`](3b85777)]:
    -   @khanacademy/simple-markdown@0.12.0
    -   @khanacademy/pure-markdown@0.3.5

Author: khan-actions-bot

Reviewers: benchristel

Required Reviewers:

Approved By: benchristel

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1308
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants