Scrolling header for accessible drawer content at page magnification #2221
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
…hat on first click
OpenAPI ChangesShow/hide No detectable change. |
OpenAPI ChangesShow/hide No detectable change. |
jonkafton
changed the title
This was referenced May 6, 2025
Closed
Closed
Closed
Closed
Merged
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.
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/6513
Description (What does it do?)
The key issues is that at page magnification the drawer title occupies too much space particularly for longer resource titles, limiting the space available for drawer content.
Screenshots (if appropriate):
Screen.Recording.2025-04-30.at.20.03.10.mov
How can this be tested?
With
chatEnabledassigned true in LearningResourceExpanded.tsx.Open the learning resource drawer on a course and confirm that the title, AskTIM opener and drawer content behaves as expected while scrolling, opening chat and prompting for chat messages that scroll past the window height; and that the chat closes on fist click of the close button and the drawer closes on the second. Confirm that it renders as expected and behaves similarly at mobile screen width. Confirm that at 400z page magnification the drawer content and the chat are visible and usable.
The representation in Figma is limiting, but the dual-purpose close it demonstrated here https://www.figma.com/proto/mSDdN8giMcncBwNgwcVJL9/UX-Wireframes?page-id=3304%3A8575&node-id=6242-31935&viewport=84%2C-15246%2C0.59&t=bOiemTVuUxdn7oYF-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=3307%3A64551