Tag System

[naomi-lgbt]

Creating a new issue specifically to track discussion for the tag system - spinning off of #48502.

This also follows up on #47478

[moT01]

Here's some notes I wrote down from our meeting:

• Make a "tags" dropdown or something expandable in the block descriptions.
• When expanded, it would list all the tags that are used in steps within that block.
• When you click on a tag, it filters the steps in the grid display to only show steps with that tag.

[bbsmooth]

Just throwing out some more requirements/suggestions/questions on what we would need to do to enhance accessibility.

• The user would need to know what tag the grid is currently filtered on (or if not filtered at all), even if the tags dropdown is contracted.
• It might be helpful to include a "clear filter" button so that keyboard users don't have to navigate through the tags in order to undo a filter. This button could be displayed only when the list is filtered.
• The previous/next step keyboard shortcuts will come in handy here to allow users to quickly go through the filtered steps until they find what they are looking for. I've heard remarks in the past that these particular shortcuts are intended for power users and thus discoverability isn't a big concern. But with this added functionality I think they are now intended for everyone and we should make sure that everyone knows they are available.
• If we are going to list all of the possible tags in the dropdown then the tags themselves would need to be implemented with an element that can communicate its state (i.e. whether it is the current filter). A button would work using the aria-pressed attribute (this is probably my preferred suggestion at this point). A checkbox would work, although a group of checkboxes usually allows for multiple checkboxes to be selected, so we might be going against expected behavior in this case.
• Another option would be to use a select for the tags. Then we wouldn't need a separate dropdown for this (or a clear button), but we would most likely need to add a Filter button since we wouldn't want the filter to apply when the user is merely scrolling through list to view the filters.

[laportabellita]

For this design, the goal was to create tags with topics that will show up under the "Start Project" button. When clicked, they will highlight the blocks of steps that are connected to the tag’s subject.
While designing, I had the following considerations in mind:

• People with visual impairments should be able to use this feature like everyone else, therefore we shouldn’t rely solely on color or contrast to differentiate the relevant numbers

• One posible option could be to have a small text somewhere explaining what the tags do for those who are not familiar enough with technology and don’t understand that these are links

• If there could potentially be like 50 tags, we need to come up with a way to make them look easy on the eye so the users will want to interact with them and not be intimidated or confused, otherwise if they look cluttered users will ignore them due to how difficult they are to read. This is why I made the tags a bit bigger, especially because the tag section can be hidden as you'll see in the design

The final draft I made today can be found on the lower right side of the figma file, the frame where the flow starts is called "Second iteration". If you choose this frame you can interact with the prototype, here's a screenshot for reference:

Here's the figma file where you can explore the process, some of my notes and the final design

And this is a quick video showing you where to find the prototype and the flow itself. For some reason the video saved at half speed so it is extra slow

Bu the way, this is just an initial draft that needs refining once we can discuss it. The design of the "See all steps" button particularly needs more work and I've just put it there as a placeholer, we may in fact replace it with a "clear filters" button and also change it's location.

tags.FCC.mp4

[bbsmooth]

@laportabellita I like what you've done here and you incorporated my first two bullet points above! I just have a few suggestions at this time:

• It would be best if the name for the toggle button that opens/closes the list of tags stays the same for both states. Perhaps just keep it as "Filter steps by topic"? We will use the aria-expanded attribute on the button itself to let screen reader users know which state it is in. The issue with changing the name on toggle is that some screen readers might not immediately pick up the change. Also, using the aria-expanded attribute is an accessibility best practice and it wouldn't make logical sense to change the name when using that attribute.
• I would vote for "Clear filter" as it would be more consistent with using "filter" on the toggle button. If we change the name on the toggle button to something that doesn't use "filter" then whatever that is, I think the clear button should use that same name for consistency's sake.

[laportabellita]

Great! If you guys like the design I can start converting it to a final draft, which includes the accessibility comments above

[laportabellita]

Here's the updated version

[ojeytonwilliams]

Thanks for sharing those designs, @laportabellita. The idea is really taking shape and the mockups look great.

The only thing that leapt out to me was that there's quite a bit of empty space in the filtered view. What do you think to collapsing the gaps between the filtered steps? e.g. rather than having 1 2 5 it would just be 1 2 5. That way, even for projects with lots of steps, there's no risk that people fail to notice that later steps are unfiltered, even if they would otherwise be off the page.

[laportabellita]

I think that's a good idea, here's a quick mockup showing what the design would look like with that modification

[ojeytonwilliams]

Thanks @laportabellita, I think that looks great.

[ahmaxed]

Great job on the mocks @laportabellita. Here is a minimal version if we decided to go down that route:

[oriooctopus]

I'm really happy to see this idea taking shape :)

Regarding the two designs, I don't have a strong preference between the two, perhaps @bbsmooth can weigh in on accessibility. I like the design of the tags of @laportabellita's but I think @ahmadabdolsaheb is a little easier to implement and takes up less space

[bbsmooth]

Just to clarify, are we allowing multiple tag filters at at time, or just one?