Display generated tags separately

[obulat]

Fixes

Fixes #4192 by @fcoveram

Description

This PR adds a separate display of machine-generated tags and tags provided by sources on the single result page following the Figma mockups.

Based on @fcoveram's suggestion, if the item only has source tags, the tags section doesn't have a visible heading.

I started to write the implementation plan for the frontend feature, but realized that this can be done in a single PR. As the project lead, do you think we need a frontend IP, @AetherUnbound?

This PR is blocked on #4379 because it has a link to the "About tags" page, but the page is not ready.
Another blocker is the text for this link. Currently, the link says "What is this?"; suggestions for the text are welcome.

The PR can be reviewed but should not be merged before #4379 is done.
#4379 was merged into this PR. Please also review the wording here.

Testing instructions

Run the app using just frontend/run dev (running dev:only would not update the English strings, so you would need to run dev at least once)
Go to http://localhost:8443/image/a487f4eb-ce05-43e1-acae-73c4ab090cc9 to see how machine-generated and source tags are displayed.

[zackkrida]

@obulat this looks great with the exception of an (existing) spacing issue that becomes more apparent when we add a text label above the tags.

Observe that the "Source" and "Source Tags" text labels are not in alignment. "Source" is 0.25rem to the right of "Source Tags".

I think we just need to remove horizontal padding from the dd and dt elements, and that this will fix the pages to match the mockups.

[AetherUnbound]

I started to write the implementation plan for the frontend feature, but realized that this can be done in a single PR. As the project lead, do you think we need a frontend IP, @AetherUnbound?

I think an IP would still be good, even just as a decision log for some of the questions/points that were made in the project proposal. It would not have to be a big document IMO!

[AetherUnbound]

This looks good when I run it locally! One question about some other information we have available for the generated tags.

[fcoveram]

To @zackkrida's point

Observe that the "Source" and "Source Tags" text labels are not in alignment. "Source" is 0.25rem to the right of "Source Tags".

If I recall correctly, we intentionally added this spacing to avoid cropping links' focus ring. In this case, the flickr label.

We can add the same spacing in this section to make it look align. Or perhaps, and correct me if I'm wrong, investigate how to fix this site-wise issue and stop us from adding empty spacings that could break the layout.

[obulat]

We can add the same spacing in this section to make it look align. Or perhaps, and correct me if I'm wrong, investigate how to fix this site-wise issue and stop us from adding empty spacings that could break the layout.

I added a negative margin to the "Source" or "Provider" (whichever comes first) to fix this. You can see in the snapshots that they are aligned now.

Now, I looked at the snapshots again, and I feel like the tags headings are fine when there are both source and generated tags. However, when there are only source tags, the "Source tags" heading is not very clear. Why are they called "source" tags? And since the "What it is?" link is only available on the Generated tags, it is not possible to navigate to the explanation page. What do you think, @fcoveram?

[fcoveram]

I think we can safely remove the "Source tags" heading when there are no machine-generated tags. The pill set in the media details area is common content in stock and other similar services and does not need further explanation.

[obulat]

I think we can safely remove the "Source tags" heading when there are no machine-generated tags. The pill set in the media details area is common content in stock and other similar services and does not need further explanation.

Updated in 15cb517. I also added a screen-reader-only "Tags" heading.

[zackkrida]

Currently, the link says "What is this?"; suggestions for the text are welcome.

@obulat I think the classic "Learn more" would be appropriate here.

[zackkrida]

LGTM. I'll write the copy for the page next week. I made sure to test that collapsible tags are still working properly; no issues there.

[zackkrida]

Hey @fcoveram could you look at this again and let us know what you think? Thanks 😄

[fcoveram]

I will take a look at this tomorrow morning 🙏 sorry for the delay

[openverse-bot]

Based on the medium urgency of this PR, the following reviewers are being gently reminded to review this PR:

@fcoveram
This reminder is being automatically generated due to the urgency configuration.

Excluding weekend¹ days, this PR was ready for review 16 day(s) ago. PRs labelled with medium urgency are expected to be reviewed within 4 weekday(s)².

@obulat, if this PR is not ready for a review, please draft it to prevent reviewers from getting further unnecessary pings.

Footnotes

1. Specifically, Saturday and Sunday. ↩

2. For the purpose of these reminders we treat Monday - Friday as weekdays. Please note that the operation that generates these reminders runs at midnight UTC on Monday - Friday. This means that depending on your timezone, you may be pinged outside of the expected range. ↩

[fcoveram]

All looks good 🚀 🌟