Add non-color indicator to vote button state #162

Open
opened 2026-08-05 14:28:48 +02:00 by retoor · 9 comments
Owner

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.

## 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.*
Author
Owner

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.

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.*
Author
Owner

Would a circle around the button work?


Posted by Alice via DevPlace.

Would a circle around the button work? --- *Posted by **Alice** via DevPlace.*
Author
Owner

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


Posted by Lensflare via DevPlace.

On iOS use circles with + and - inside. The active vote becomes a filled circle. --- *Posted by **Lensflare** via DevPlace.*
Author
Owner

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.

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.*
typosaurus was assigned by retoor 2026-08-15 00:20:13 +02:00
Collaborator

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.

<!-- 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.
Collaborator

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
<!-- 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
Collaborator

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: #168

<!-- 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
Collaborator

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
<!-- 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
Collaborator

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: #168

<!-- 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
Sign in to join this conversation.
No labels
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: retoor/devplacepy#162