[Feature] Icon-only buttons for Save and Download in code viewer are unclear to new users

[rachel-d-07]

Problem Statement

The code viewer component displays two action buttons at the bottom — a star icon and a download icon — with no text labels. New users cannot tell what these buttons do at a glance. The star icon could mean "like", "rate", or "save to favourites", and the download icon has no indication of what format or file will be downloaded. There is also no tooltip on hover and no aria-label, making the buttons inaccessible to screen reader users.

What problem does this feature solve?

Proposed Solution

Replace the icon-only buttons with labeled buttons that show both the icon and a short text label:

• Star icon → "Save" (with amber-colored star icon)
• Download icon → "Download" (with indigo-colored download icon)

This makes the action immediately clear without requiring any prior knowledge of the UI. The buttons should also have aria-label attributes added for screen reader accessibility:

• aria-label="Save to favourites"
• aria-label="Download code"

Files to update: the code viewer component that renders the bottom action bar.

Describe your preferred solution.

Alternatives Considered

1. Tooltip on hover only - rejected because tooltips require the user to hover first, which means new users still won't understand the buttons on first glance. Tooltips also don't work on touch/mobile devices.

2. Keeping icon-only with aria-label only - rejected because aria-label only helps screen reader users. Sighted new users still face the same confusion.

3. Full redesign of the action bar - rejected as out of scope. The fix only requires adding text labels to two existing buttons, no layout changes needed.

List other ideas if any.

Additional Context

This follows standard UX best practices - icon-only buttons should only be used when the icon is universally understood (e.g. a close X button). Actions like "save" and "download" benefit from explicit labels, especially for first-time users.

Reference: Nielsen Norman Group - Icon Usability (https://www.nngroup.com/articles/icon-usability/)

Add examples, links, or mockups if helpful.

BEFORE

AFTER

[Tejaswini466]

Hi @imDarshanGK ,

I would like to work on this issue under GSSoC 2026.

I reviewed the issue and understand the usability and accessibility concerns with the icon-only action buttons in the code viewer. I can update the component to include labels next to the icons and add the suggested aria-label attributes while maintaining the existing design and responsiveness.

Could you please assign this issue to me?

Thank you!

[anucodes-hub]

I would like to work on this issue. I have reviewed the code viewer component and would like to work on this issue. I have started investigating more on it. Kindly assign me this issue.
/assign

[malikrehanmulla1048]

Hi @imDarshanGK,

I am a GSSoC 2026 contributor and I would like to work on this issue.
I have gone through the problem statement and the existing code viewer implementation, and I can update the bottom action bar to replace the icon-only buttons with labeled buttons (“Save” and “Download”) and add the appropriate aria-label attributes while keeping the design responsive and accessible.

Could you please assign this issue to me under GSSoC 2026?

Thanks,
Malikrehan M M
(GitHub: @malikrehanmulla1048)

[Vanshika123-Pundir]

Hi @imDarshanGK,

I would like to work on this issue under GSSoC 2026.

I understand the usability and accessibility concerns regarding the icon-only buttons in the code viewer. I would like to update the buttons with clear text labels and add appropriate aria-label attributes while maintaining the existing design.

Kindly assign this issue to me.

Thank you!