[BUG] [alpha] Git Submodule View: silent status badges and unlabelled loading spinner

[saurabhp643]

Project

ide

Description

The Git submodule interface within the Git Panel contains accessibility violations that hinder screen reader users and keyboard navigation:

1. Silent Status Badges: Submodule status indicators (e.g., "initialized", "modified") are implemented using the Badge component without aria-label or context. Screen readers only announce the status text without explaining its purpose (e.g., "Status: modified").
2. Unlabelled Loading Spinner: The loading indicator shown while fetching submodules is an Icon component with no aria-label or aria-live region, making the loading state invisible to screen reader users.
3. Missing List Semantics: The list of submodules is rendered as a series of ListItem components inside a div without any list roles (role="list"), which fails to provide structural context to assistive technologies.

Screenshots

System Information

• OS: Linux (Ubuntu 24.04)
• CPU: 8 cores
• RAM: 24GB
• Cortex IDE Version: 2.22.0 (Alpha)

Screenshots

(No screenshots provided)

Steps to Reproduce

1. Open the Git Panel.
2. Switch to the Submodules tab.
3. Observe the loading spinner while submodules are being fetched.
4. Inspect the submodule items in the list, specifically the status badges and the overall list container.

Expected Behavior

• The loading spinner should have aria-label="Loading submodules..." and be placed in an aria-live="polite" region.
• Status badges should have prefixing labels for screen readers, such as aria-label={"Status: " + sub.status}.
• The list container should have role="list" and submodule items should have role="listitem".

Actual Behavior

• The loading spinner is a "silent" icon.
• Badges only contain raw text.
• The list provides no structural landmarks for screen readers.

Code References

• Loading Spinner: GitPanel.tsx:2150
• Status Badges: GitPanel.tsx:2215
• Submodule List: GitPanel.tsx:2169

Recommendation

1. Add aria-label to the loading spinner Icon.
2. Wrap status badges in a visually hidden prefix or use aria-label.
3. Add role="list" to the submodule list container and role="listitem" to the items.

[echobt]

✅ Validated

VALID - Accessibility bug confirmed in GitPanel.tsx submodule view.

Code Verification:

1. Loading Spinner (line ~2145): <Icon name="spinner" ...> has NO aria-label or aria-live region - confirmed in code.
2. Status Badges (line ~2215): <Badge variant={getStatusVariant()} size="sm">{sub.status}</Badge> has NO aria-label describing context - confirmed in code.
3. List Semantics (line ~2169): Submodule list rendered in plain <div> with <ListItem> components but NO role="list" or role="listitem" attributes - confirmed in code.

Component Accessibility:

• GitPanel is accessible via ActivityBar → Git icon → Submodules tab
• Component is properly imported in CortexSidebarContainer.tsx and rendered when sidebarTab === "git"

Screenshot Note: The screenshot shows File Explorer loading instead of Git Panel, but the CODE is the source of truth and confirms all reported accessibility violations exist. These are real WCAG violations that would hinder screen reader users.

Not a Duplicate: Issue #29459 is about file status indicators (M, A, D) in CortexGitPanel - different component and context.

[allornothingai]

I have fixed this issue as part of a batch ARIA and CSS fix PR in the Cortex IDE repository.

PR: CortexLM/cortex-ide#56

RTC Wallet: allornothingai

[allornothingai]

Just checking in on this bounty submission. Is there any further review required? If accepted, my payout wallet is:

0x0c67cbE9e30c66267975eE2D74Eb88036CA65e9F