From 44d71d59efd79ee723a1dec72ec77833560c45cf Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 31 May 2025 00:24:34 +0200
Subject: [PATCH] Add icon to header of pinned posts carousel in web UI
 (#34869)

---
 .../mastodon/components/featured_carousel.tsx        | 12 ++++++++++--
 app/javascript/styles/mastodon/components.scss       |  8 ++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/components/featured_carousel.tsx b/app/javascript/mastodon/components/featured_carousel.tsx
index f84f7865c1..195331ef9f 100644
--- a/app/javascript/mastodon/components/featured_carousel.tsx
+++ b/app/javascript/mastodon/components/featured_carousel.tsx
@@ -5,6 +5,7 @@ import {
   useLayoutEffect,
   useRef,
   useState,
+  useId,
 } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -17,12 +18,14 @@ import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 
 import { expandAccountFeaturedTimeline } from '@/mastodon/actions/timelines';
+import { Icon } from '@/mastodon/components/icon';
 import { IconButton } from '@/mastodon/components/icon_button';
 import StatusContainer from '@/mastodon/containers/status_container';
 import { usePrevious } from '@/mastodon/hooks/usePrevious';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 
 const messages = defineMessages({
   previous: { id: 'featured_carousel.previous', defaultMessage: 'Previous' },
@@ -38,6 +41,7 @@ export const FeaturedCarousel: React.FC<{
   tagged?: string;
 }> = ({ accountId, tagged }) => {
   const intl = useIntl();
+  const accessibilityId = useId();
 
   // Load pinned statuses
   const dispatch = useAppDispatch();
@@ -120,11 +124,15 @@ export const FeaturedCarousel: React.FC<{
       className='featured-carousel'
       {...bind()}
       aria-roledescription='carousel'
-      aria-labelledby='featured-carousel-title'
+      aria-labelledby={`${accessibilityId}-title`}
       role='region'
     >
       <div className='featured-carousel__header'>
-        <h4 className='featured-carousel__title' id='featured-carousel-title'>
+        <h4
+          className='featured-carousel__title'
+          id={`${accessibilityId}-title`}
+        >
+          <Icon id='thumb-tack' icon={PushPinIcon} />
           <FormattedMessage
             id='featured_carousel.header'
             defaultMessage='{count, plural, one {Pinned Post} other {Pinned Posts}}'
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a520bfa08f..cbedc53a01 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -11074,5 +11074,13 @@ noscript {
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
   }
 }