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; + } } }