<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.">
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
Code Snippet
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:
More info about aria-expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded