fix: apply hover state on Tags with href

[essandhu]

Closes #9507

Adding the suggested fix from the above issue to the TagGroup aria component. Added a new test to cover the case where a Tag in a TagGroup has an href and is being hovered. No documentation or accessibility changes seem to be needed at the time

Before:

tag-hover-before.mp4

After:

tag-hover-after.mp4

✅ Pull Request Checklist:

• [✅] Included link to corresponding React Spectrum GitHub Issue.
• [✅] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• [✅] Filled out test instructions.
• [✅] Updated documentation (if it already exists for this component).
• [✅] Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Tested with the existing "Tag Group Example" under the aria components Storybook

1. Open the Storybook page
2. Scroll down to the "React Aria Components" folder. Navigate to the TabGroup component and click on the "Tab Group Example" example
3. Inspect the properties of the first Tag with Chrome Dev Tools or a similar tool (should be a
   with class "react-aria-Tag"). Check for the data-hovered property
4. Move the cursor over the first Tag in the example. Move the cursor off of the example.

Before code changes, the data-hovered attribute will never be displayed on the tag. After changes, data-hovered=true should display while the tag is hovered, and the attribute should disappear once no longer hovering.

Note: I added background color styles for local testing to ensure that was still working properly. This can be done by updating the following line:

react-spectrum/packages/react-aria-components/stories/TagGroup.stories.tsx

Line 78 in ee49fdb

style={({isSelected}) => ({border: '1px solid gray', borderRadius: 4, padding: '0 4px', background: isSelected ? 'black' : '', color: isSelected ? 'white' : '', cursor: props.href ? 'pointer' : 'default'})} />

to be this instead:

style={({isSelected, isHovered}) => ({border: '1px solid gray', borderRadius: 4, padding: '0 4px', background: isSelected ? 'black' : isHovered ? 'red' : '', color: isSelected ? 'white' : '', cursor: props.href ? 'pointer' : 'default'})} />

🧢 Your Project:

None