feat: improve interactive element color accessibility on api docs #9076
Conversation
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
The table of contents to the right of the page has a list of links that, when hovered, are given an underline. There is also a sidebar to the left of the page with titles and links to reference documentation. The color contrast on these elements can be improved by adding a greater color contrast for visual accessibility. This commit changes the hover color of these elements in a visually nice and accessible way.
|
💖 Thanks for opening this pull request! 💖 Things that will help get your PR across the finish line:
We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can. |
Adds an opening transition when the search container is displayed. Improves its parent backdrop color contrast, as well as the close button contrast on both the light and dark themes.
|
I am in the process of also improving some of the other interactive elements- so please hold on merging for now. I don't expect it to take more than a day or two. |
This commit adds a few border and background color contrast changes, along with transitions to the interactive elements on the page. These include the navbar (top), table of contents (right), sidebar (left), and mobile sidebar elements at small screen sizes.
|
It's now ready for review :) |
1zzowiebeha
changed the title
1zzowiebeha
changed the title
1zzowiebeha
changed the title
if the user changes their browser font size setting, px unit media queries will not adapt to these changes and may cause the query to not take effect, or to take effect at the wrong time. rem units on the other hand do adjust based on the browser's font size setting. this commit switches unit values and types to enable this behavior.
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.
implements: #9075
Description
The table of contents to the right of the page has a list of links that, when hovered, are given an underline. There is also a sidebar to the left of the page with titles and links to reference documentation. The color contrast on these elements can be improved by altering the hover and active state color of these elements for better visual accessibility.
This commit changes the color of these elements, along with the navbar, search widget, and jump anchors in a visually nice and accessible way. Some background and border transitions are included as well to make for a nice experience.
This extends to the light theme, dark theme, desktop screen width and mobile screen width.
Before and After demonstration:
before-and-after-compressed.1.mp4
(note: I forgot to showcase the search widget in this video)
Specific Changes proposed
This pull updates the CSS file located at
/build/docs/styles/videojs.css.It overrides some clean-jsdoc-theme default styles to make the page look nicer with better color contrast.
Requirements Checklist
npm run docs:apito error