search

danny-avila / LibreChat

Enhanced ChatGPT Clone: Features Anthropic, AWS, OpenAI, Assistants API, Azure, Groq, o1, GPT-4o, Mistral, OpenRouter, Vertex AI, Gemini, Artifacts, AI model switching, message search, langchain, DALL-E-3, ChatGPT Plugins, OpenAI Functions, Secure Multi-User System, Presets, completely open-source for self-hosting. Actively in public development.
https://librechat.ai/
MIT License
18.41k stars 3.09k forks source link

side panel open/close button's state is not described #4487

Open derekjackson-das opened 5 days ago

derekjackson-das commented 5 days ago

Issue Description

There is no state description on the side panel's toggle button that opens and closes it to indicate if the panel is expanded or collapsed.

WCAG Criteria

1.3.1 Info and Relationships - Level A

Screenshot

Screenshot 2024-10-21 at 10 49 56 AM

Code Snippet

<div aria-label="toggle-chat-history-nav" id="toggle-left-nav" tabindex="0" role="button" class="cursor-pointer flex items-center justify-center" alt="accessibility properties displayed in the inspector showing no state description on the button">

Notes

The attributes aria-expanded and aria-controls should be added to indicate to assistive technology what the current state of the side panel is so users know what action to take.

The value of the aria-expanded attribute must be updated to true/false when the button is pressed to reflect the new state of the panel.

The aria-controls attribute must contain the id of the element the button is controlling as its value.

The name does not need to include the type of button, i.e. toggle, either. The aria-label should provide a human readable name more descriptive of the button, e.g. "chat history" so that users will be told "chat history panel, button, expanded."

Example:

<div aria-label="chat history" aria-expanded="true" aria-controls="chat-history-nav" id="toggle-left-nav" tabindex="0" role="button" class="cursor-pointer flex items-center justify-center"  alt="accessibility properties displayed in the inspector showing the state described on the button, expanded value is true.">
Screenshot 2024-10-21 at 11 24 15 AM

More info about aria-expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

Kim-Jaemin420 commented 2 days ago

I think I can fix this issue. Would it be okay if I resolve it? @derekjackson-das @Tanvez