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

Add CSS to overwrite and prevent extra scroll bar caused by CKEditor screen reader #11785

Conversation

SDScandrettKint
Copy link
Member

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description of Change

CKEditor includes a CSS class called cke_screen_reader_only which adds a component with 1px height and width. In Arches, this appears with an extra, unnecessary scrollbar on the right side of the page, moving only one pixel.

This fix overwrites the position of the CSS class from absolute to fixed, which prevents the scroll bar from showing.

@phudson-he - I tested this addition with the NVDA screen reader and it still read out the rich-text widget as intended, but please could you double check it works with this addition?
It's also possible that we change the height/width values rather than the position? Though I think they both solve the issue.

Issues Solved

Closes #11713

Checklist

  • I targeted one of these branches:
    • dev/8.0.x (under development): features, bugfixes not covered below
    • dev/7.6.x (main support): regressions, crashing bugs, security issues, major bugs in new features
    • dev/6.2.x (extended support): major security issues, data loss issues
  • I added a changelog in arches/releases
  • I submitted a PR to arches-docs (if appropriate)
  • Unit tests pass locally with my changes
  • I added tests that prove my fix is effective or that my feature works
  • My test fails on the target branch

Accessibility Checklist

Developer Guide

Topic Changed Retested
Color contrast
Form fields
Headings
Links
Keyboard
Responsive Design
HTML validation
Screen reader x x

Ticket Background

Further comments

Note, I have targeted 7.6.x, as this is a bug to Arches version 7 and a regression as it was not present in version 6.

Copy link
Contributor

@phudson-he phudson-he left a comment

Choose a reason for hiding this comment

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

Works fine for me, changelog entry?

@SDScandrettKint
Copy link
Member Author

Note, this PR can not be merged yet. More testing is required, as setting position fixed can cause i18n issues when switching to a right-to-left language.

@chiatt
Copy link
Member

chiatt commented Feb 13, 2025

While this doesn't fix a 7.6 feature regression, it does resolve a problem with the screen reader which could make data unavailable to some users.

@chiatt chiatt merged commit 206a887 into archesproject:dev/7.6.x Feb 13, 2025
6 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Subject: Accessibility Accessibility features
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants