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

[derekjackson-das]

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

<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.">

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

[Kim-Jaemin420]

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