1489808 - Improve flag UI by using buttons instead of dropdown list

Status: NEW

(bugzilla.mozilla.org :: User Interface, enhancement)

Description

[Kohei Yoshino]

Attachment: flag-ui.png

Bugzilla’s current flag UI is a `<select>` dropdown list, but given that a flag is a simple quad state field with short label values (unset, `?`, `+`, or `-`), it’s better to use buttons instead for easier selection. Usage of dropdown lists should be avoided whenever possible especially when the values are not many.

Implementation-wise, these buttons will be elements having the `radio` ARIA role, not `button`.

See the attached image for a quick mockup.

Comment 1

[Mark Côté [:mcote]]

FYI review flags for Firefox and related products will be going away as all reviews are moved to Phabricator.  We'll be wanting to move the remaining flags (e.g. uplift-approval flags) at some point as well (not entirely sure how, maybe as revision tags).  So although this will be useful for any other products still using attachment flags, the overall impact will be lower than it might have been in the past.

Comment 2

[Kohei Yoshino]

I know the review flag is going away, but give that there are still other various quad state fields, this is worth doing. Part of the style has already been added in Bug 1489718.

Comment 3

[Kohei Yoshino]

Screencast: https://twitter.com/BugzillaUX/status/1046941525928685568

Comment 4

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

If these can be handled the same way that the changes to the bug type field were made (keeping them accessible.)

However, I think I'd rather see these treated as tags (which use : as a field separator for tuples) in a general tag field to reduce complexity of the bug edit view.

I'm inclined to wontfix this and review how we want to manage tags.