Status redesign: Header and ARIA fixes (#40811)

app/javascript/mastodon/components/status/header.module.scss

@@ -1,8 +1,6 @@
 @use '@/styles/mastodon/mixins';
 
-// Header
-
-.header {
+.root {
   display: grid;
   grid-template-columns: subgrid;
   grid-template-rows: 1fr;
@@ -24,7 +22,7 @@
   }
 }
 
-.headerAvatar {
+.avatar {
   padding-inline-end: var(--col-gap);
 
   > span {
@@ -34,7 +32,7 @@
   }
 }
 
-.headerName {
+.name {
   @include mixins.type-body;
 
   display: flex;
@@ -42,10 +40,13 @@
 }
 
 // Overrides .header a
-a.headerNameLink {
+a.nameLink {
   @include mixins.type-body-strong;
 
   color: var(--color-text-primary);
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   // Overrides .display-name
   > span {
@@ -53,6 +54,13 @@ a.headerNameLink {
   }
 }
 
-.headerHandle {
-  @include mixins.type-meta;
+.date {
+  flex-shrink: 0;
+}
+
+.handle {
+  @include mixins.type-meta;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

app/javascript/mastodon/components/status/header.tsx

@@ -54,7 +54,7 @@ export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
   let displayName = (
     <Link
       {...accountLinkProps}
-      className={classes.headerNameLink}
+      className={classes.nameLink}
       aria-describedby={handleId}
     >
       <DisplayName account={account} variant='noDomain' />
@@ -102,18 +102,18 @@ export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
   }
 
   return (
-    <header className={classNames(className, classes.header)}>
+    <header className={classNames(className, classes.root)}>
       <Link
         {...accountLinkProps}
         role='presentation'
         tabIndex={-1}
-        className={classes.headerAvatar}
+        className={classes.avatar}
       >
         <Avatar account={account} size={null} />
       </Link>
 
       <div>
-        <p className={classes.headerName}>
+        <p className={classes.name}>
           {displayName}
           &bull;
           <Link
@@ -121,12 +121,13 @@ export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
               pathname: statusLink(status),
               state: { reference: 'status' },
             }}
+            className={classes.date}
           >
             <RelativeTimestamp timestamp={status.created_at} />
           </Link>
         </p>
 
-        <p className={classes.headerHandle}>
+        <p className={classes.handle}>
           <Link
             {...accountLinkProps}
             role='presentation'

app/javascript/mastodon/components/status/hooks.ts

@@ -406,15 +406,25 @@ export function useTextForScreenReader({
 
     const spoilerText = status.translation?.spoiler_text ?? status.spoiler_text;
     const contentHtml = status.translation?.contentHtml ?? status.contentHtml;
-    const contentText = domParser.parseFromString(contentHtml, 'text/html')
-      .documentElement.textContent;
+    let contentText = spoilerText;
+    if (!status.hidden) {
+      contentText = '';
+      for (const paragraph of domParser
+        .parseFromString(contentHtml, 'text/html')
+        .querySelectorAll('p')) {
+        const text = paragraph.textContent.trim();
+        if (text) {
+          contentText += ` ${text}`;
+        }
+      }
+    }
 
     const values = [
       isQuote ? intl.formatMessage(screenReaderMessages.quote_noun) : undefined,
       displayName.length === 0
         ? status.account.acct.split('@')[0]
         : displayName,
-      spoilerText && status.hidden ? spoilerText : contentText,
+      contentText,
       status.quote
         ? intl.formatMessage(screenReaderMessages.contains_quote)
         : undefined,