Add new ESLint rule requiring explicit button types (#36738)

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

@@ -49,7 +49,11 @@ export const Alert: React.FC<{
       </span>
 
       {hasAction && (
-        <button className='notification-bar__action' onClick={onActionClick}>
+        <button
+          className='notification-bar__action'
+          onClick={onActionClick}
+          type='button'
+        >
           {action}
         </button>
       )}

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

@@ -78,6 +78,7 @@ export const Button: React.FC<Props> = ({
       aria-live={loading !== undefined ? 'polite' : undefined}
       onClick={handleClick}
       title={title}
+      // eslint-disable-next-line react/button-has-type -- set correctly via TS
       type={type}
       {...props}
     >

app/javascript/mastodon/components/column_back_button.tsx

@@ -30,7 +30,7 @@ export const ColumnBackButton: React.FC<{ onClick?: OnClickCallback }> = ({
   const handleClick = useHandleClick(onClick);
 
   const component = (
-    <button onClick={handleClick} className='column-back-button'>
+    <button onClick={handleClick} className='column-back-button' type='button'>
       <Icon
         id='chevron-left'
         icon={ArrowBackIcon}

app/javascript/mastodon/components/column_header.tsx

@@ -53,6 +53,7 @@ const BackButton: React.FC<{
         compact: onlyIcon,
       })}
       aria-label={intl.formatMessage(messages.back)}
+      type='button'
     >
       <Icon
         id='chevron-left'
@@ -172,6 +173,7 @@ export const ColumnHeader: React.FC<Props> = ({
       <button
         className='text-btn column-header__setting-btn'
         onClick={handlePin}
+        type='button'
       >
         <Icon id='times' icon={CloseIcon} />{' '}
         <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' />
@@ -185,6 +187,7 @@ export const ColumnHeader: React.FC<Props> = ({
           aria-label={intl.formatMessage(messages.moveLeft)}
           className='icon-button column-header__setting-btn'
           onClick={handleMoveLeft}
+          type='button'
         >
           <Icon id='chevron-left' icon={ChevronLeftIcon} />
         </button>
@@ -193,6 +196,7 @@ export const ColumnHeader: React.FC<Props> = ({
           aria-label={intl.formatMessage(messages.moveRight)}
           className='icon-button column-header__setting-btn'
           onClick={handleMoveRight}
+          type='button'
         >
           <Icon id='chevron-right' icon={ChevronRightIcon} />
         </button>
@@ -203,6 +207,7 @@ export const ColumnHeader: React.FC<Props> = ({
       <button
         className='text-btn column-header__setting-btn'
         onClick={handlePin}
+        type='button'
       >
         <Icon id='plus' icon={AddIcon} />{' '}
         <FormattedMessage id='column_header.pin' defaultMessage='Pin' />
@@ -237,6 +242,7 @@ export const ColumnHeader: React.FC<Props> = ({
           collapsed ? messages.show : messages.hide,
         )}
         onClick={handleToggleClick}
+        type='button'
       >
         <i className='icon-with-badge'>
           <Icon
@@ -259,7 +265,11 @@ export const ColumnHeader: React.FC<Props> = ({
           <>
             {backButton}
 
-            <button onClick={handleTitleClick} className='column-header__title'>
+            <button
+              onClick={handleTitleClick}
+              className='column-header__title'
+              type='button'
+            >
               {!backButton && (
                 <Icon
                   id={icon}

app/javascript/mastodon/components/copy_paste_text.tsx

@@ -74,7 +74,7 @@ export const CopyPasteText: React.FC<{ value: string }> = ({ value }) => {
         onBlur={handleBlur}
       />
 
-      <button className='button' onClick={handleButtonClick}>
+      <button className='button' onClick={handleButtonClick} type='button'>
         <Icon id='copy' icon={ContentCopyIcon} />{' '}
         {copied ? (
           <FormattedMessage id='copypaste.copied' defaultMessage='Copied' />

app/javascript/mastodon/components/dropdown_menu.tsx

@@ -237,6 +237,7 @@ export const DropdownMenu = <Item = MenuItem,>({
           onKeyUp={handleItemKeyUp}
           data-index={i}
           aria-disabled={disabled}
+          type='button'
         >
           <DropdownMenuItemContent item={option} />
         </button>

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

@@ -98,7 +98,12 @@ export const EditedTimestamp: React.FC<{
           className='dropdown-menu__item edited-timestamp__history__item'
           key={item.get('created_at') as string}
         >
-          <button data-index={index} onClick={onClick} onKeyUp={onKeyUp}>
+          <button
+            data-index={index}
+            onClick={onClick}
+            onKeyUp={onKeyUp}
+            type='button'
+          >
             {label}
           </button>
         </li>
@@ -118,7 +123,7 @@ export const EditedTimestamp: React.FC<{
       onItemClick={handleItemClick}
       forceDropdown
     >
-      <button className='dropdown-menu__text-button'>
+      <button className='dropdown-menu__text-button' type='button'>
         <FormattedMessage
           id='status.edited'
           defaultMessage='Edited {date}'

app/javascript/mastodon/components/hashtag_bar.tsx

@@ -235,7 +235,7 @@ const HashtagBar: React.FC<{
       ))}
 
       {!expanded && hashtags.length > VISIBLE_HASHTAGS && (
-        <button className='link-button' onClick={handleClick}>
+        <button className='link-button' onClick={handleClick} type='button'>
           <FormattedMessage
             id='hashtags.and_other'
             defaultMessage='…and {count, plural, other {# more}}'

app/javascript/mastodon/components/hotkeys/hotkeys.stories.tsx

@@ -153,7 +153,7 @@ export const Default = {
             the app.
           </p>
           <p>
-            When a <button>Button</button> is focused,
+            When a <button type='button'>Button</button> is focused,
             <kbd>Enter</kbd>
             should not trigger open, but <kbd>o</kbd>
             should.

app/javascript/mastodon/components/learn_more_link.tsx

@@ -23,6 +23,7 @@ export const LearnMoreLink: React.FC<{ children: React.ReactNode }> = ({
         onClick={handleClick}
         aria-expanded={open}
         aria-controls={accessibilityId}
+        type='button'
       >
         <FormattedMessage
           id='learn_more_link.learn_more'
@@ -48,7 +49,11 @@ export const LearnMoreLink: React.FC<{ children: React.ReactNode }> = ({
             <div className='learn-more__popout__content'>{children}</div>
 
             <div>
-              <button className='link-button' onClick={handleClick}>
+              <button
+                className='link-button'
+                onClick={handleClick}
+                type='button'
+              >
                 <FormattedMessage
                   id='learn_more_link.got_it'
                   defaultMessage='Got it'

app/javascript/mastodon/components/load_gap.tsx

@@ -32,6 +32,7 @@ export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
       title={intl.formatMessage(messages.load_more)}
+      type='button'
     >
       {loading ? (
         <LoadingIndicator />

app/javascript/mastodon/components/load_pending.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export const LoadPending: React.FC<Props> = ({ onClick, count }) => {
   return (
-    <button className='load-more load-gap' onClick={onClick}>
+    <button className='load-more load-gap' onClick={onClick} type='button'>
       <FormattedMessage
         id='load_pending'
         defaultMessage='{count, plural, one {# new item} other {# new items}}'

app/javascript/mastodon/components/poll.tsx

@@ -171,13 +171,14 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
             className='button button-secondary'
             disabled={voteDisabled}
             onClick={handleVote}
+            type='button'
           >
             <FormattedMessage id='poll.vote' defaultMessage='Vote' />
           </button>
         )}
         {!showResults && (
           <>
-            <button className='poll__link' onClick={handleReveal}>
+            <button className='poll__link' onClick={handleReveal} type='button'>
               <FormattedMessage id='poll.reveal' defaultMessage='See results' />
             </button>{' '}
             ·{' '}
@@ -185,7 +186,11 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
         )}
         {showResults && !disabled && (
           <>
-            <button className='poll__link' onClick={handleRefresh}>
+            <button
+              className='poll__link'
+              onClick={handleRefresh}
+              type='button'
+            >
               <FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
             </button>{' '}
             ·{' '}

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

@@ -232,6 +232,7 @@ const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
         ref={focusRefCallback}
         aria-disabled={disabled}
         data-index={index}
+        type='button'
       >
         <DropdownMenuItemContent item={item} />
       </button>

app/javascript/mastodon/components/status_quoted.tsx

@@ -73,7 +73,7 @@ const LimitedAccountHint: React.FC<{ accountId: string }> = ({ accountId }) => {
         defaultMessage='This account has been hidden by the moderators of {domain}.'
         values={{ domain }}
       />
-      <button onClick={reveal} className='link-button'>
+      <button onClick={reveal} className='link-button' type='button'>
         <FormattedMessage
           id='status.quote_error.limited_account_hint.action'
           defaultMessage='Show anyway'
@@ -129,7 +129,7 @@ const FilteredQuote: React.FC<{
   return (
     <>
       {message}
-      <button onClick={reveal} className='link-button'>
+      <button onClick={reveal} className='link-button' type='button'>
         <FormattedMessage
           id='status.quote_error.limited_account_hint.action'
           defaultMessage='Show anyway'

app/javascript/mastodon/features/about/components/section.tsx

@@ -31,6 +31,7 @@ export const Section: FC<SectionProps> = ({
         className='about__section__title'
         tabIndex={0}
         onClick={handleClick}
+        type='button'
       >
         <Icon
           id={collapsed ? 'chevron-right' : 'chevron-down'}

app/javascript/mastodon/features/account/components/domain_pill.tsx

@@ -37,6 +37,7 @@ export const DomainPill: React.FC<{
         onClick={handleClick}
         aria-expanded={open}
         aria-controls={accessibilityId}
+        type='button'
       >
         {domain}
       </button>
@@ -154,6 +155,7 @@ export const DomainPill: React.FC<{
                       <button
                         onClick={handleExpandClick}
                         className='link-button'
+                        type='button'
                       >
                         {x}
                       </button>
@@ -169,6 +171,7 @@ export const DomainPill: React.FC<{
                       <button
                         onClick={handleExpandClick}
                         className='link-button'
+                        type='button'
                       >
                         {x}
                       </button>

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -489,6 +489,7 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
                   className='link-button'
                   onClick={handleDetectClick}
                   disabled={type !== 'image' || isDetecting}
+                  type='button'
                 >
                   <FormattedMessage
                     id='alt_text_modal.add_text_from_image'

app/javascript/mastodon/features/compose/components/search.tsx

@@ -557,7 +557,11 @@ export const Search: React.FC<{
                     )}
                   >
                     <span>{label}</span>
-                    <button className='icon-button' onMouseDown={forget}>
+                    <button
+                      className='icon-button'
+                      onMouseDown={forget}
+                      type='button'
+                    >
                       <Icon id='times' icon={CloseIcon} />
                     </button>
                   </div>
@@ -591,6 +595,7 @@ export const Search: React.FC<{
                   className={classNames('search__popout__menu__item', {
                     selected: selectedOption === i,
                   })}
+                  type='button'
                 >
                   {label}
                 </button>
@@ -617,6 +622,7 @@ export const Search: React.FC<{
                     selectedOption ===
                     (quickActions.length || recent.length) + i,
                 })}
+                type='button'
               >
                 {label}
               </button>

app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx

@@ -270,7 +270,7 @@ export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({
         </h3>
 
         <div className='inline-follow-suggestions__header__actions'>
-          <button className='link-button' onClick={handleDismiss}>
+          <button className='link-button' onClick={handleDismiss} type='button'>
             <FormattedMessage
               id='follow_suggestions.dismiss'
               defaultMessage="Don't show again"
@@ -309,6 +309,7 @@ export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({
             className='inline-follow-suggestions__body__scroll-button left'
             onClick={handleLeftNav}
             aria-label={intl.formatMessage(messages.previous)}
+            type='button'
           >
             <div className='inline-follow-suggestions__body__scroll-button__icon'>
               <Icon id='' icon={ChevronLeftIcon} />
@@ -321,6 +322,7 @@ export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({
             className='inline-follow-suggestions__body__scroll-button right'
             onClick={handleRightNav}
             aria-label={intl.formatMessage(messages.next)}
+            type='button'
           >
             <div className='inline-follow-suggestions__body__scroll-button__icon'>
               <Icon id='' icon={ChevronRightIcon} />

app/javascript/mastodon/features/interaction_modal/index.tsx

@@ -381,6 +381,7 @@ const LoginForm: React.FC<{
                 className={classNames('search__popout__menu__item', {
                   selected: selectedOption === i,
                 })}
+                type='button'
               >
                 {option
                   .split(domainRegExp)
@@ -451,7 +452,7 @@ const InteractionModal: React.FC<{
     );
   } else {
     signupButton = (
-      <button className='link-button' onClick={handleSignupClick}>
+      <button className='link-button' onClick={handleSignupClick} type='button'>
         <FormattedMessage
           id='sign_in_banner.create_account'
           defaultMessage='Create account'

app/javascript/mastodon/features/navigation_panel/components/more_link.tsx

@@ -113,7 +113,7 @@ export const MoreLink: React.FC = () => {
 
   return (
     <Dropdown items={menu} placement='bottom-start'>
-      <button className='column-link column-link--transparent'>
+      <button className='column-link column-link--transparent' type='button'>
         <Icon id='' icon={MoreHorizIcon} className='column-link__icon' />
 
         <FormattedMessage id='navigation_bar.more' defaultMessage='More' />

app/javascript/mastodon/features/navigation_panel/components/sign_in_banner.tsx

@@ -71,6 +71,7 @@ export const SignInBanner: React.FC = () => {
       <button
         className='button button--block'
         onClick={openClosedRegistrationsModal}
+        type='button'
       >
         <FormattedMessage
           id='sign_in_banner.create_account'

app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx

@@ -45,6 +45,7 @@ export const FilteredNotificationsIconButton: React.FC<{
       title={intl.formatMessage(messages.filteredNotifications)}
       onClick={handleClick}
       className={className}
+      type='button'
     >
       <Icon id='filtered-notifications' icon={InventoryIcon} />
     </button>

app/javascript/mastodon/features/notifications_v2/components/notification_annual_report.tsx

@@ -47,7 +47,7 @@ export const NotificationAnnualReport: React.FC<{
             values={{ year }}
           />
         </p>
-        <button onClick={handleClick} className='link-button'>
+        <button onClick={handleClick} className='link-button' type='button'>
           <FormattedMessage
             id='notification.annual_report.view'
             defaultMessage='View #Wrapstodon'

app/javascript/mastodon/features/notifications_v2/filter_bar.tsx

@@ -50,6 +50,7 @@ const BarButton: React.FC<
       className={selectedFilter === type ? 'active' : ''}
       onClick={onClick}
       title={title}
+      type='button'
     >
       {children}
     </button>

app/javascript/mastodon/features/notifications_v2/index.tsx

@@ -245,6 +245,7 @@ export const Notifications: React.FC<{
           title={intl.formatMessage(messages.markAsRead)}
           onClick={handleMarkAsRead}
           className='column-header__button'
+          type='button'
         >
           <Icon id='done-all' icon={DoneAllIcon} />
         </button>

app/javascript/mastodon/features/search/components/search_section.tsx

@@ -9,7 +9,7 @@ export const SearchSection: React.FC<{
     <div className='search-results__section__header'>
       <h3>{title}</h3>
       {onClickMore && (
-        <button onClick={onClickMore}>
+        <button onClick={onClickMore} type='button'>
           <FormattedMessage
             id='search_results.see_all'
             defaultMessage='See all'

app/javascript/mastodon/features/search/index.tsx

@@ -232,12 +232,14 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
         <button
           onClick={handleSelectAll}
           className={mappedType === 'all' ? 'active' : undefined}
+          type='button'
         >
           <FormattedMessage id='search_results.all' defaultMessage='All' />
         </button>
         <button
           onClick={handleSelectAccounts}
           className={mappedType === 'accounts' ? 'active' : undefined}
+          type='button'
         >
           <FormattedMessage
             id='search_results.accounts'
@@ -247,6 +249,7 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
         <button
           onClick={handleSelectHashtags}
           className={mappedType === 'hashtags' ? 'active' : undefined}
+          type='button'
         >
           <FormattedMessage
             id='search_results.hashtags'
@@ -256,6 +259,7 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
         <button
           onClick={handleSelectStatuses}
           className={mappedType === 'statuses' ? 'active' : undefined}
+          type='button'
         >
           <FormattedMessage
             id='search_results.statuses'

app/javascript/mastodon/features/ui/components/actions_modal.tsx

@@ -25,7 +25,12 @@ export const ActionsModal: React.FC<{
 
         if (isActionItem(option)) {
           element = (
-            <button onClick={onClick} data-index={i} disabled={disabled}>
+            <button
+              onClick={onClick}
+              data-index={i}
+              disabled={disabled}
+              type='button'
+            >
               <DropdownMenuItemContent item={option} />
             </button>
           );

app/javascript/mastodon/features/ui/components/boost_modal.tsx

@@ -113,7 +113,7 @@ export const BoostModal: React.FC<{
 
           <div className='spacer' />
 
-          <button onClick={handleCancel} className='link-button'>
+          <button onClick={handleCancel} className='link-button' type='button'>
             <FormattedMessage
               id='confirmation_modal.cancel'
               defaultMessage='Cancel'

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -58,7 +58,7 @@ export const ConfirmationModal: React.FC<
 
       <div className='safety-action-modal__bottom'>
         <div className='safety-action-modal__actions'>
-          <button onClick={onClose} className='link-button'>
+          <button onClick={onClose} className='link-button' type='button'>
             {cancel ?? (
               <FormattedMessage
                 id='confirmation_modal.cancel'
@@ -70,7 +70,11 @@ export const ConfirmationModal: React.FC<
           {secondary && (
             <>
               <div className='spacer' />
-              <button onClick={handleSecondary} className='link-button'>
+              <button
+                onClick={handleSecondary}
+                className='link-button'
+                type='button'
+              >
                 {secondary}
               </button>
             </>

app/javascript/mastodon/features/ui/components/domain_block_modal.tsx

@@ -196,7 +196,7 @@ export const DomainBlockModal: React.FC<{
 
           <div className='spacer' />
 
-          <button onClick={handleCancel} className='link-button'>
+          <button onClick={handleCancel} className='link-button' type='button'>
             <FormattedMessage
               id='confirmation_modal.cancel'
               defaultMessage='Cancel'

app/javascript/mastodon/features/ui/components/media_modal.tsx

@@ -247,6 +247,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
         className='media-modal__nav media-modal__nav--prev'
         onClick={handlePrevClick}
         aria-label={intl.formatMessage(messages.previous)}
+        type='button'
       >
         <Icon id='chevron-left' icon={ChevronLeftIcon} />
       </button>
@@ -257,6 +258,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
         className='media-modal__nav  media-modal__nav--next'
         onClick={handleNextClick}
         aria-label={intl.formatMessage(messages.next)}
+        type='button'
       >
         <Icon id='chevron-right' icon={ChevronRightIcon} />
       </button>
@@ -354,6 +356,7 @@ const MediaPagination: FC<MediaPaginationProps> = ({
             active: i === index,
           })}
           onClick={handleChangeIndex(i)}
+          type='button'
         >
           {i + 1}
         </button>

app/javascript/mastodon/features/ui/components/navigation_bar.tsx

@@ -127,7 +127,11 @@ const LoginOrSignUp: React.FC = () => {
       );
     } else {
       signupButton = (
-        <button className='button' onClick={openClosedRegistrationsModal}>
+        <button
+          className='button'
+          onClick={openClosedRegistrationsModal}
+          type='button'
+        >
           <FormattedMessage
             id='sign_in_banner.create_account'
             defaultMessage='Create account'
@@ -195,6 +199,7 @@ export const NavigationBar: React.FC = () => {
           className={classNames('ui__navigation-bar__item', { active: open })}
           onClick={handleClick}
           aria-label={intl.formatMessage(messages.menu)}
+          type='button'
         >
           <Icon id='' icon={MenuIcon} />
         </button>

app/javascript/mastodon/features/video/index.tsx

@@ -875,6 +875,7 @@ export const Video: React.FC<{
               <button
                 className='media-gallery__actions__pill'
                 onClick={toggleReveal}
+                type='button'
               >
                 <FormattedMessage
                   id='media_gallery.hide'

eslint.config.mjs

@@ -180,6 +180,7 @@ export default tseslint.config([
     'vendor/**/*',
     'streaming/**/*',
     '.bundle/**/*',
+    'storybook-static/**/*',
   ]),
   react.configs.flat.recommended,
   react.configs.flat['jsx-runtime'],
@@ -290,6 +291,7 @@ export default tseslint.config([
       'react/jsx-tag-spacing': 'error',
       'react/jsx-wrap-multilines': 'error',
       'react/self-closing-comp': 'error',
+      'react/button-has-type': 'error',
     },
   },
   {