website: Switch to likert style labeling #872
Conversation
othrayte
requested review from
fozziethebeat,
k-nearest-neighbor and
AbdBarho
as code owners
There was a problem hiding this comment.
Thank you!
One final thing which I would like to discuss is using a standard radio group with toggles (like this) instead of buttons with <<, <, etc...
The former is well known and I think it signifies the intention with much less room for misinterpretation.
| .last() | ||
| .click(); | ||
| // TODO: Reimplement to click on a aria-roledescription="radio" in each incomplete aria-roledescription="radiogroup" | ||
| cy.get('[aria-roledescription="radiogroup"]'); |
There was a problem hiding this comment.
we can assign custom data properties for testing only, similar to what we had previously data-cy="label-group-item"
There was a problem hiding this comment.
Rather than radio buttons or new radio group buttons, we could use a Chakra Slider with discrete options and custom tics
There was a problem hiding this comment.
@fozziethebeat, would this still look similar or would it look like a slider again. I couldn't see a way that the custom ticks reproduce the same N options interface, Chakra's examples look like they don't change how the actual sliders work or appear.
There was a problem hiding this comment.
I'm not sure it's a great option but you can customize the slider appearance and option. It still ultimately would be a slider however.
There was a problem hiding this comment.
we can assign custom data properties for testing only, similar to what we had previously
data-cy="label-group-item"
I've made an attempt at this, but it is a little odd as you can't use data-cy on components that don't render to the dom and expect cypress to find them so I had to pass it down. For finding the options in the radio group I'm still using the aria role as that should work regardless of how we implement the actual radio buttons.
@AbdBarho, Do you mean with " (*) name ( ) name2 ( ) name3 " or are you refering to custom radio options from that page? I think the former has significant clarity issues is we show it on narrow phone screens or in the report message modal popup. The latter is effectively what we have at the moment. Initially I thought the custom appearance support would do more but when I went back to read it again during development I couldn't see how it helped, maybe I missed something. |
othrayte
force-pushed
the
likert-like-labelling
branch
from
5dec960
to
19cf93b
Compare
|
@AbdBarho, FYI we are discussing radio option appearance in discord. https://discordapp.com/channels/1055935572465700980/1065268675357179924/1066626112521764884 |
othrayte
force-pushed
the
likert-like-labelling
branch
from
19cf93b
to
25cf9eb
Compare
|
The latest change switches to radio buttons as per the vote in discord. The once caveat is for the case of very skinny windows and phones where we move the labels above the radio buttons due to space constraints. The other change was some minor tweaks to the label text. I suspect there will be more of that coming even after we get this PR in. Images: |
|
Nice job! :-) |
This PR proposes to change the labeling task and messaging labeling to use a likert style scale of 5 options instead of a slider. The advantages include:
Things to note: