Add Keyboard Navigation for Mood Slider with ARIA Attributes. #78
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
|
@Dbansal06 please:
Thanks! |
|
Hello! I have resolved the merge conflict in Here is the information you requested: Streamlit Cloud DeploymentDeployment Link: https://talkheal-npusk6cgzqy2gbpurnhzfp.streamlit.app/ Screenshots
I believe this pull request is now ready for your review. Thank you! |
|
Fixes #84 |
|
Great work @Dbansal06! Feel free to work on more issues, thanks for improving TalkHeal 💙 |
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.
This pull request implements keyboard navigation for the mood slider in TalkHeal.py to enhance accessibility, addressing a new issue . The changes ensure users with motor disabilities can interact with the mood slider using arrow keys, and screen readers can properly interpret the slider’s state, aligning with TalkHeal’s mission to provide inclusive mental health support.
Changes Made:
Added a custom HTML/JavaScript mood slider using st.components.v1.html in TalkHeal.py, supporting left/right arrow key navigation for five emotional states (Very Sad, Sad, Neutral, Happy, Very Happy).
Included ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow) for screen reader compatibility.
Implemented AI-assisted coping tips displayed based on the selected mood.
Styled the slider with accent-color: #ff69b4 to match the soft pink/magenta UI.
Added a “Track Your Mood” section in the main UI, integrated after the header and tone display.
Testing:
Ran the app locally with streamlit run TalkHeal.py.
Verified keyboard navigation updates the slider and displays correct mood labels and coping tips.
Tested with a screen reader (e.g., NVDA) to confirm accessibility compliance.
Contribution: This is part of my GGSOC 2025 contribution to TalkHeal. The changes are confined to TalkHeal.py and maintain the existing functionality of authentication, chatbot, and other features. Please review and let me know if any adjustments are needed!