@CCiufo-WMF since the states were previously added in the Figma spec, I'm moving this task to Needs Refinement so we can implement it when we have availability.

This probably should not be completed until T343474 is ready to implement as well

Change 950040 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] FilterChip: Add interactive styles

https://gerrit.wikimedia.org/r/950040

@bmartinezcalvo This is ready for design review as well! FilterChip demo, FilterChipInput demo

This is what I have implemented:

• For the FilterChip component, whether it is inside a FilterChipInput or not, when you navigate to it via the keyboard, the entire chip will get a focus outline instead of just the remove button. This matches up with what OOUI does - inside a FilterChipInput, when you use the keyboard to navigate to a chip and press enter, the chip is removed. There is no way to edit a chip via keyboard nav.
• Inside a FilterChipInput, FilterChips will also get hover and active styles. These styles are only included for FilterChips inside the FilterChipInput since FilterChips outside of that cannot be clicked.

Please let me know what you think of this implementation, especially the first part. I didn't think it was intuitive (and maybe impossible) to tab first to the entire chip, then to its remove button, and I wanted to keep the interaction in line with the OOUI version (cc @Volker_E)

@AnneT thank you for preparing this. I've reviewed both the FilterChip and the FilterChipInput and I'm listing some corrections:

1. At the moment, in the FilterChip demo it's just represented the focus state in the chip. Could we also include the hover and active states in the FilterChip demo? If the chip can receive focus, it should also be hoverable and active.
   

2. Also at the moment, just the FilterChip itself receives the focus (the focus on the remove button is missing). If this button receives hover and active states, it should also receive the focus one. There are 2 interactive elements within a FilterChip:
   • The FilterChip itself (so it should receive hover, active and focus states). When the focus is placed on the chip and you press Enter, the chip becomes text within the input to edit the chip's text.
   • The remove button within the chip (since it's an interactive button it should also receive hover, active and focus states). When the focus is placed on the remove button and you press Enter, the chip is removed.
     
     I think the focus order within a FilterChipInput should be: Input --> Chip itself --> Remove button

3. Regarding the position of the chip, when it's being edited the current behavior seems a bit confusing to me since when you are editing a chip in a middle position (e.g. the 2nd chip in a group of 3 chips), when you click on it to edit it the 2nd chip moves to the 3rd position and the 3rd chip moves to the 2nd (Option 1 in the examples below). What if we edit the chip always in the position where the chip is (Option 2 below)?
   

Hey @bmartinezcalvo ,

In T343479#9101315, @bmartinezcalvo wrote:

1. At the moment, in the FilterChip demo it's just represented the focus state in the chip. Could we also include the hover and active states in the FilterChip demo? If the chip can receive focus, it should also be hoverable and active.

I have moved all interactive styles to the FilterChip.vue file, so FilterChips will have these styles whether they are inside the FilterChipInput or not. I do think there is more to discuss here, so I've made this a topic for tomorrow's design/eng sync.

2. Also at the moment, just the FilterChip itself receives the focus (the focus on the remove button is missing). If this button receives hover and active states, it should also receive the focus one. There are 2 interactive elements within a FilterChip:
   • The FilterChip itself (so it should receive hover, active and focus states). When the focus is placed on the chip and you press Enter, the chip becomes text within the input to edit the chip's text.
   • The remove button within the chip (since it's an interactive button it should also receive hover, active and focus states). When the focus is placed on the remove button and you press Enter, the chip is removed.
     
     I think the focus order within a FilterChipInput should be: Input --> Chip itself --> Remove button

I think we should discuss the best keyboard navigation behavior; this is different from what OOUI and other examples I've seen do, and I think the accessibility features of FilterChip/FilterChipInput should inform the keyboard navigation behavior. Let's talk about this at the next design/eng sync as well.

3. Regarding the position of the chip, when it's being edited the current behavior seems a bit confusing to me since when you are editing a chip in a middle position (e.g. the 2nd chip in a group of 3 chips), when you click on it to edit it the 2nd chip moves to the 3rd position and the 3rd chip moves to the 2nd (Option 1 in the examples below). What if we edit the chip always in the position where the chip is (Option 2 below)?

This would be nice but would take a lot of time and effort. If we want to do this in the future, I would recommend making a separate task.

We decided as a team to:

• Keep the focus behavior similar to what's implemented in OOUI, where you can focus on the entire chip but not the button
• To open a new task for UX improvements of the FilterChip/FilterChipInput, including editing in place or improving the editing experience

Change 950040 merged by jenkins-bot:

[design/codex@main] FilterChip: Add interactive styles

https://gerrit.wikimedia.org/r/950040

In T343479#9114499, @AnneT wrote:

We decided as a team to:

• Keep the focus behavior similar to what's implemented in OOUI, where you can focus on the entire chip but not the button
• To open a new task for UX improvements of the FilterChip/FilterChipInput, including editing in place or improving the editing experience

@AnneT thank you, the interactive states in the FilterChip input look great.

Change 953351 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.17.0 to v0.18.0

https://gerrit.wikimedia.org/r/953351

Change 953351 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.17.0 to v0.18.0

https://gerrit.wikimedia.org/r/953351