Issue Summary

The state of the button is not defined programmatically

Steps to Reproduce

1. Open the "Create pull request" page.
2. Navigate to the "Blame" button present in the "Diff" tab.
3. Inspect the code and observe that the state is missing for the button.

Screenshot

Actual Results

When the user activates the "Blame" button, the diff view gets expanded from the side. The dynamic change is visually visible but the change is not conveyed to the screen reader users. The expand/collapse state is not programmatically determined

As a result, the screen reader users are unaware of the dynamic change that is happening on the page. 

Expected Results

The screen reader should announce the expand/collapse state when interacting with the button for its users.

Set the 'aria-expanded' attribute to 'false' for the link when the link is in the collapsed state. Ensure that the value of the 'aria-expanded' attribute changes to 'true' in the expanded state on user interaction via scripting.

Code Example:

<button aria-expanded="true" aria-busy="false" class="css-1luyhz2" data-testid="blame-button" tabindex="0" type="button" aria-describedby="200val-tooltip">
   <span class="css-178ag6o">Blame</span>
</button>

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest