Add CSS to overwrite and prevent extra scroll bar caused by CKEditor screen reader #11785
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.
Types of changes
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
tofixed
, 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
Accessibility Checklist
Developer Guide
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.