Render FormattedMessage translations into React.Fragment by default (#38398)

.storybook/preview.tsx

@@ -137,11 +137,7 @@ const preview: Preview = {
       }, [currentLocale, currentLocaleData]);
 
       return (
-        <IntlProvider
+        <IntlProvider locale={currentLocale} messages={currentLocaleData}>
-          locale={currentLocale}
-          messages={currentLocaleData}
-          textComponent='span'
-        >
           <Story />
         </IntlProvider>
       );

app/javascript/mastodon/components/alt_text_badge/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useId, Fragment } from 'react';
+import { useState, useCallback, useRef, useId } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -84,7 +84,6 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
                 <FormattedMessage
                   id='alt_text_badge.title'
                   defaultMessage='Alt text'
-                  tagName={Fragment}
                 />
               </h4>
 

app/javascript/mastodon/features/collections/detail/accounts_list.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -100,14 +100,12 @@ const RevokeControls: React.FC<{
         <FormattedMessage
           id='collections.detail.accept_inclusion'
           defaultMessage='Okay'
-          tagName={Fragment}
         />
       </Button>
       <Button secondary onClick={confirmRevoke}>
         <FormattedMessage
           id='collections.detail.revoke_inclusion'
           defaultMessage='Remove me'
-          tagName={Fragment}
         />
       </Button>
     </div>
@@ -143,7 +141,6 @@ const SensitiveScreen: React.FC<{
         <FormattedMessage
           id='content_warning.show'
           defaultMessage='Show anyway'
-          tagName={Fragment}
         />
       </Button>
     </div>
@@ -205,7 +202,6 @@ export const CollectionAccountsList: React.FC<{
               values={{
                 author: <SimpleAuthorName id={collection.account_id} />,
               }}
-              tagName={Fragment}
             />
           </h3>
           <Article
@@ -231,7 +227,6 @@ export const CollectionAccountsList: React.FC<{
             <FormattedMessage
               id='collections.detail.other_accounts_in_collection'
               defaultMessage='Others in this collection:'
-              tagName={Fragment}
             />
           </h3>
         </>

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -413,7 +413,6 @@ const LanguageField: React.FC = () => {
         <FormattedMessage
           id='collections.collection_language_none'
           defaultMessage='None'
-          tagName={Fragment}
         />
       </option>
       {languages?.map(([code, name, localName]) => (

app/javascript/mastodon/locales/intl_provider.tsx

@@ -50,7 +50,6 @@ export const IntlProvider: React.FC<
       locale={locale}
       messages={messages}
       onError={onProviderError}
-      textComponent='span'
       {...props}
     >
       {children}