Add note preview to note action aria-labels

What does this MR do and why?

Improves accessibility of note action buttons by including a preview of the comment content in their aria-labels. Screen reader users can now identify which comment they're interacting with when navigating edit, delete, reply, resolve, add reaction, and more actions buttons.

Why

Multiple note action buttons share the same generic labels (e.g., "Edit comment", "Add reactions", "More actions"), making it impossible for screen reader users to distinguish between actions on different comments. By including a preview of the comment content as a unique identifier in each aria-label, users can now differentiate between controls and understand which comment they're about to interact with.

Current behavior:

• "Edit comment"
• "Delete comment"
• "Reply to @username"
• "Add reaction to @username"
• "More actions for @username"
• "Resolve, @username"

With this change:

• "Edit comment, @username: 'This is a test comment'"
• "Delete comment, @username: 'This is a test comment'"
• "Reply to @username: 'This is a test comment'"
• "Add reaction to @username: 'This is a test comment'"
• "More actions for @username: 'This is a test comment'"
• "Resolve, @username: 'This is a test comment'"

How it works

The implementation leverages existing GitLab infrastructure:

• Backend: Uses the existing NotePresenter#note_first_line_html method which already truncates the note to 125 characters using first_line_in_markdown helper
• GraphQL: Adds body_first_line_html field to the note query, mapping to the presenter method
• Frontend:
  • Passes the preview HTML to NoteActions component via notePreview prop
  • Uses the existing stripHtml utility to remove HTML tags for clean aria-label text
  • Truncates the preview to the first 7 words using the new truncateByWords utility to keep aria-labels concise
  • Computes aria-labels for each action button that include the preview when available

Changelog: fixed

References

• https://gitlab.com/gitlab-org/gitlab/-/work_items/518832
• https://gitlab.com/gitlab-org/gitlab/-/work_items/586913

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Navigate to an MR with comments
2. Check the aria-label of the action buttons for that comment

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #518832