SolidOS / SolidOS/solid-ui

Icons are unintuitive

Open
#60 1 comment 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
153
Forks
46
Avg merge
1d 8h
Merged PRs (30d)
7

Description

Screen Shot 2019-03-21 at 9 57 07 AM

I just started checking out Solid today. After logging in and trying to edit my profile, I encounter a bunch of unhelpful icons. Above is one example, but these are all over the place.

  1. It wasn't immediately clear that these icons are buttons. I expect a standard design or color to identify them as buttons. There is also no hover/press state.
  2. I have no idea what the buttons do. Text would be much more clear.
  3. They do not use <button> or <a> tags—this makes them less accessible.

I'd love it the UI switched over to using text buttons in a <button> tag. The icon could be kept alongside the text to accentuate it. If the style of a browser-default button is undesirable, consider making a standardized button style.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the profile-editing flow described in the issue and inventory the icon-only controls shown in the screenshot. Identify where these controls are rendered, then check that each has a clear text label, uses an appropriate button or anchor element, and provides visible hover or press feedback. Done means the affected controls are understandable and accessible without relying on icons alone.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.