[Accessibility] Inaccessible collapsible content in “My Mistakes” section

[deepjoshi11th]

Description

The “read more” toggle buttons in the My Mistakes section do not provide necessary accessibility features for expandable content. When clicked, they reveal additional text (.mistake-summary and .mistake-full) but they do not update any ARIA attributes (such as aria-expanded on the button or an aria-controls reference to the content)
main.js
. Screen readers have no cue that new content became available. Moreover, after the second click, the button is hidden (display: none), which can unexpectedly remove the focused element from the DOM. This can confuse keyboard-only users as focus may get lost.

Steps to Reproduce

• Using a screen reader, navigate to a mistake card and activate the “read more” button.
• The additional content becomes visible visually, but the screen reader does not announce any change — it isn’t aware that content expanded, since the button’s accessible state didn’t change.
• After clicking “read more” twice, the button disappears entirely (to indicate fully expanded), and if you were using keyboard navigation, your focus might suddenly vanish or reset to the top of the page.

Expected Behavior

Expandable/collapsible sections should follow ARIA design patterns for disclosure widgets. The “read more” button should have aria-expanded="false" initially (and toggle to "true" when content is expanded), and possibly an aria-controls="id-of-content" pointing to the collapsible content div. This way, assistive tech announces the toggle state (e.g., “read more, expanded”). When the content is fully expanded and the button is removed, focus should ideally be managed (e.g., move focus to the newly revealed content container or the next interactive element).

Actual Behavior

Currently, the toggle is purely visual. The HTML of the button does not reflect expanded/collapsed state, and no focus management is done when removing it. This means screen reader users might not know the content appeared. Keyboard users might press “read more” and then have the focus unexpectedly jump or reset when the button disappears.

Why It Matters

Without proper ARIA attributes, interactive disclosure components are not accessible. Users who cannot see the content need to be informed of changes in state. Also, abruptly removing a focused element can be disorienting. Ensuring a smooth experience for keyboard and screen reader users will make the content usable for all.

Recommended Fix

Implement the ARIA practices for expandable content:

• Add aria-expanded="false" to each “read more” button and toggle it to "true" when the content is revealed (and vice versa).
• Add aria-controls on the button referencing the ID of the content <div> that it expands.
• Instead of removing the button from the DOM on full expansion, consider just disabling it or changing its text to “Collapse” or hiding it visually but keeping it available to assistive tech (to avoid focus loss). If it must be removed, immediately shift focus to a logical element (perhaps the heading of the revealed content or a “collapse” control if added).
• (Optional) Consider using a <details><summary> element which has built-in accessibility for collapsible content as an alternative approach.
  By doing this, users relying on assistive technologies will be notified when content expands, and the interaction will be smoother.

Assignee: @deepjoshi11th