Skip to content
This repository has been archived by the owner on Mar 11, 2024. It is now read-only.

display own votes in poll result #41

Closed
wants to merge 1 commit into from

Conversation

nikurasutan
Copy link

@nikurasutan nikurasutan commented Feb 2, 2023

So here I got my merge request from pinafore. Thanks for continuing the project.It resolves nolanlawson#2319 from nolanlawson's project

@nikurasutan
Copy link
Author

By the way, this is how it's looking
image

@nikurasutan
Copy link
Author

Force pushed because of false ssh signature ^^

Comment on lines +7 to +10
<strong>{option.share}%</strong><span>{@html cleanTitle(option.title)}</span>
{#if own_votes == i || Object.values(own_votes).includes(i)}
<SvgIcon className="poll-icon" href="#fa-check" />
{/if}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey would you mind throwing in some text too to indicate own_votes for screen-readers?

You could lean into making it part of the design and put a visible piece of text after the mark saying something like your vote. or you could go a little hacky and put a 0px font-size element with text after it so it doesnt show up visible. I don't really like that because I'm not sure if there's edge cases it will cause to break, and i don't know if it works universally though it seems to in iOS. but i also don't know if there's other strats to use when you want text but don't want it part of the visual layout.

Whatever you do, I think you're not supposed to use aria-label. MDN is really insistent that aria-label is only intended for use for interactive elements, so maybe it messes up screen readers if you use them on non-interactive elements (could make it selectable as an interactive object maybe). I'm not like a domain expert though, just someone who cares about keeping things screen-readable

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds fair, maybe I'll try to introduce some Title-element in the SvgIcon, that all Icons on here can be screen-reader friendly.
https://github.com/NickColley/semaphore/blob/main/src/routes/_components/SvgIcon.html#L7
It then can be indicated by an aria-describedby.
This solution seems to double the alt description in some edge cases, but seems like the best solution if I'll stick to an SVG Element and avoid area-labels
https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/#testing-results

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Polls don't display own votes
2 participants