feat(react-tag): Added selected state for Tag and InteractionTag

[ValentinaKozlova]

New Behavior

Added selected state for Tag and InteractionTag

Variants of selected state (for testing)

Related Issue(s)

First part of this feature #33738

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.171 MB 293.232 kB	1.174 MB 293.714 kB	3.159 kB 482 B
react-tags InteractionTag	15.225 kB 6.165 kB	15.274 kB 6.179 kB	49 B 14 B
react-tags Tag	29.098 kB 9.559 kB	29.86 kB 9.73 kB	762 B 171 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.638 kB 20.24 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	224.582 kB 64.913 kB
react-components react-components: FluentProvider & webLightTheme	44.473 kB 14.597 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-tag-picker @fluentui/react-tag-picker - package	185.663 kB 55.782 kB
react-tags TagGroup	82.745 kB 24.532 kB
react-timepicker-compat TimePicker	108.551 kB 36.094 kB

_{🤖 This report was generated against 35637c4ff6d2739f5ebd7a40d733b116fe454df7}

[github-actions]

Pull request demo site: URL

[YuanboXue-Amber]

Hi there, this PR contains only style change for the selected Tag/InteractionTag.
There're still something missing from this feature:

1. TagGroup provides context and proper a11y role for Tag/InteractionTag. I think it should handle the selected state as well.
2. There is no a11y attributes for screen readers to know about the selected state.

Do you plan to have follow up PR to address the above?

[ValentinaKozlova]

Hi there, this PR contains only style change for the selected Tag/InteractionTag. There're still something missing from this feature:

1. TagGroup provides context and proper a11y role for Tag/InteractionTag. I think it should handle the selected state as well.
2. There is no a11y attributes for screen readers to know about the selected state.

Do you plan to have follow up PR to address the above?

There's mention that it's only the first part of this feature. There should be also controllable state. They wanted this feature urgent but considering how long the PR review takes it's not that urgent after all X)

[YuanboXue-Amber]

I see. Could you add a warning in the selected Tag/InteractionTag story, so it's clear to the users that this feature is only visual currently? And the warning can be removed when the feature is completed

[YuanboXue-Amber]

Or if there's a better way to release 'preview' features like that, I'm all for it

[sopranopillow]

LGTM, the only thing to watch out for is what Amber said. While I don't think there's any issues with diving it the way you're doing it (style changes + prop addition -> logic + semantics), I leave it up to y'all if this should be changed. If so, I would suggest adding that logic in this PR, I don't think it would add too much complexity.