Rating survey smiley faces are not evenly spaced #13632

Bug Description

In the rating-style survey (SurveyQuestionRating), the five smiley face buttons are not evenly spaced — the gap between the 1st and 2nd icons is noticeably wider than the rest, and the last icon doesn't sit flush with the end of the row.

Each choice renders its label inside the same flex item as the icon button, so the first and last items are sized by their text (~90–105px) while the middle three collapse to min-width: 50px. With justify-content: space-between, free space is distributed between item boxes rather than icon centers, so the icon 1 → 2 gap is labelWidth + g while the others are g + 50. The margin-left/margin-right/translateX(±9px) rules in _googlesitekit-surveys.scss only inset the row and nudge the label text; they never equalize the icon spacing.

This has been latent since 2021 but became obvious after PR #11258: <p> became <P>, which defaults to body/medium, and .googlesitekit-typography--body.googlesitekit-typography--medium (0,4,0) outranks .googlesitekit-survey__choice p (0,3,1). The labels grew from 12px/0.2px to 14px/0.25px, widening the end items and roughly doubling the discrepancy.

Steps to reproduce

1. Open the Components/Surveys/SurveyQuestionRating story (or trigger a rating survey in the dashboard).
2. Observe that the 1st → 2nd icon gap is wider than the others and the last icon is inset from the end of the row.

Screenshots

Additional Context

• Affected: assets/js/components/surveys/SurveyQuestionRating{,Choice}.js, assets/sass/components/surveys/_googlesitekit-surveys.scss
• Regression amplified in PR Enhancement/10946 p tag typography #11258 (issue Replace hardcoded p tags with new Typography component #10946).

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The rating icons are evenly spaced, with the first and last aligned to the ends of the row, regardless of the length of the choice labels.
• Only the first and last choice labels are displayed, positioned beneath their respective ends of the scale, and rendered at their original size (12px).
• Long (e.g. translated) labels wrap rather than overflow the survey card, and never affect icon spacing.
• Screen reader output and the overall survey card layout are unchanged.

Implementation Brief

• In SurveyQuestionRatingChoice, remove the <P> label so the component renders only the icon Button, retaining its aria-label.
• In SurveyQuestionRating, render a .googlesitekit-survey__choices-labels row after .googlesitekit-survey__choices containing <P size={ SIZE_SMALL }> for the first and last choice text, with aria-hidden="true" since the buttons already announce those strings. Guard against choices.length < 2.
• In _googlesitekit-surveys.scss, fix the choice items at flex: 0 0 50px and move the row inset from the first/last child margins to horizontal padding on both rows. Delete the :first-child/:last-child margin and translateX rules and the display: none rule for the middle labels.
• Style the label row as a flex row with space-between, the end labels aligned outward and each capped at roughly half the row width so long strings wrap. Keep the existing label color and 6px top margin; drop the font declarations now covered by the body/small Typography classes.

Test Coverage

• Will likely require updating VRT reference

QA Brief

• In Storybook, open Components → Surveys → SurveyQuestionRating (and Components → Surveys → CurrentSurvey → Single question):
  • Verify the five smiley icons are evenly spaced, with the first and last icons aligned to the ends of the row (no wider gap between the 1st and 2nd icons, last icon not inset).
  • Verify only the first ("Unhappy") and last ("Delighted") labels are shown, beneath their respective ends of the scale, in small (12px) text.
  • In the Controls panel, change choices[0].text and choices[4].text to long strings (e.g. "Extremadamente insatisfecho con la experiencia" / "Extremadamente satisfecho con la experiencia general", and single long words such as "Unzufriedenheitsbekundungsformular"). Verify the labels wrap within the survey card, don't overlap each other, and the icon spacing doesn't change.
  • Repeat the above at mobile, tablet and desktop widths (e.g. 320px, 600px, 960px and wider).
• On the Site Kit dashboard, trigger a rating survey (e.g. via the Site Kit Tester plugin's Tools → Manage Site Kit Surveys on a non-production environment) and verify:
  • The same spacing and label behaviour as above.
  • Each icon button can be reached with the keyboard and shows its focus/hover state.
  • A screen reader announces each icon button by its label (e.g. "Unhappy, button"), without reading the "Unhappy"/"Delighted" text beneath the row a second time.
  • Selecting an icon proceeds to the survey completion screen as before.

Changelog entry

• Fix UI styles for the happiness survey answers.