#162

Add non-color indicator to vote button state

Status: closed
D-04got10-01 D-04got10-01 ·

Summary

Vote buttons (+/-) on posts and comments currently indicate the voted state only by a color change. This is insufficient for users with reduced vision or color vision deficiencies. The state should also be conveyed through a non-color cue such as a glyph, shape, outline, or fill change.

Steps to Reproduce

  1. Open any post or comment with + / - vote buttons.
  2. Click the + button (upvote).
  3. Observe that the only visual change is a color change of the button.

Expected Behaviour

The pressed/voted state should be distinguishable by more than color - e.g., a change in the glyph/shape of the character, an outline, a fill, or another non-color cue - so users with color vision deficiencies can reliably tell whether they have voted.

Actual Behaviour

The button's state is indicated solely by changing color; no non-color cue is provided.

Environment

Not provided.


Reported by D-04got10-01 via DevPlace.

Updates & comments

D-04got10-01 D-04got10-01 ·

Design suggestion from the reporter:

The ideal solution would be to use characters very similar to the ones already in use. If there is a Unicode equivalent for '+' and '-' that e.g. sits inside a square box or similar, that would be best - the character count between the pressed and not-pressed states would remain identical (one character either way), so the layout would not shift at all.

An alternative would be to wrap the pressed button in brackets, e.g. show '[+]' or '[-]' when voted. The downside of that approach is that the pressed state would display three characters instead of one, which may break the GUI design by shifting elements around and possibly misaligning the vote buttons relative to their surroundings.


Posted by D-04got10-01 via DevPlace.

Developer reply from dev retoor ·

Would a circle around the button work?


Posted by Alice via DevPlace.

Lensflare Lensflare ·

On iOS use circles with + and - inside. The active vote becomes a filled circle.


Posted by Lensflare via DevPlace.

D-04got10-01 D-04got10-01 ·

Yup. These would work. My suggestion was mainly to avoid the need to create new art. Some of those do seem to be standardized art assets, though.


Posted by D-04got10-01 via DevPlace.

Developer reply from dev typosaurus ·

<!-- typosaurus:claim run=c36faeceb55d45b6bf38a45eec4f47ab id=7d3ea6469dff team=e128e22619ab46999074678e27b7e0f7 -->

YELENA · project-manager - 2026-08-15T00:40:32.372852+00:00

Ticket claimed by team Dev Team ONE ELITE.
Branch: typosaurus/162-add-non-color-indicator-to-vote-button-state
Agents assigned: @yelena, @katya, @mila, @vera, @nadia, @sveta, @tanya, @zoya, @irina, @oksana, @larisa
Next: Decompose the ticket into an executable tree.

Developer reply from dev typosaurus ·

<!-- typosaurus:progress run=c36faeceb55d45b6bf38a45eec4f47ab id=e583e8d0014c team=e128e22619ab46999074678e27b7e0f7 -->

YELENA · project-manager - 2026-08-15T03:06:15.782676+00:00

Progress

State: planning
Completed: 8/8 nodes
Current: none - none
Cost: 0.1737 USD · Elapsed: 2h 25m

Completed

  • Add non-color indicator to vote button state - done
  • Map every vote-button state surface and the non-color precedent - done
  • Implement non-color voted-state cue on post and comment vote buttons - done
  • Extend vote-state tests to assert the non-color cue - done
  • Review the vote-state change against the ticket and accessibility rules - done
  • Inventory every post and comment vote-button surface - done
  • Confirm the star precedent, enumerate test dependencies, recommend the non-color cue - done
  • Review the vote-button change map against the acceptance criteria - done

Open

  • none
Developer reply from dev typosaurus ·

<!-- typosaurus:summary run=c36faeceb55d45b6bf38a45eec4f47ab id=70b0ebedbf57 team=e128e22619ab46999074678e27b7e0f7 -->

YELENA · project-manager - 2026-08-15T03:06:26.081669+00:00

Result

Run completed for ticket #162.

Delivered:

  • none

Not delivered:

  • none

Verification: make test - see nodes
Commits: 3 · Cost: 0.1737 USD · Duration: 2h 25m
Pull request: https://retoor.molodetz.nl/retoor/devplacepy/pulls/168

Developer reply from dev typosaurus ·

<!-- typosaurus:progress run=c36faeceb55d45b6bf38a45eec4f47ab id=359411ca87a4 team=e128e22619ab46999074678e27b7e0f7 -->

YELENA · project-manager - 2026-08-16T01:12:32.125124+00:00

Progress

State: running
Completed: 9/10 nodes
Current: none - none
Cost: 0.1916 USD · Elapsed: 24h 32m

Completed

  • Map every vote-button state surface and the non-color precedent - done
  • Implement non-color voted-state cue on post and comment vote buttons - done
  • Extend vote-state tests to assert the non-color cue - done
  • Review the vote-state change against the ticket and accessibility rules - done
  • Reconcile rebase conflicts onto master - done
  • Inventory every post and comment vote-button surface - done
  • Confirm the star precedent, enumerate test dependencies, recommend the non-color cue - done
  • Review the vote-button change map against the acceptance criteria - done

Open

  • Publish: push the branch and open the pull request - ready
Developer reply from dev typosaurus ·

<!-- typosaurus:summary run=c36faeceb55d45b6bf38a45eec4f47ab id=c5ff1d6207d1 team=e128e22619ab46999074678e27b7e0f7 -->

YELENA · project-manager - 2026-08-16T01:12:41.049487+00:00

Result

Run completed for ticket #162.

Delivered:

  • none

Not delivered:

  • none

Verification: make test - see nodes
Commits: 3 · Cost: 0.1916 USD · Duration: 24h 32m
Pull request: https://retoor.molodetz.nl/retoor/devplacepy/pulls/168

retoor retoor ·

Fixed: post and comment vote buttons now show a filled or outlined shape in addition to color for their voted state, matching the existing star-vote pattern, so voted state no longer depends on color alone. Closing as resolved.


Posted by retoor via DevPlace.

Log in to comment.