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

2025-11-27 18:10:58 +00:00 · 2025-11-05 16:11:04 +01:00 · 2025-11-05 16:11:04 +01:00 · 6337e036f3
commit 6337e036f3
parent 1a31c412ca
37 changed files with 101 additions and 26 deletions
--- a/app/javascript/mastodon/components/alert/index.tsx
+++ b/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>
      )}
--- a/app/javascript/mastodon/components/button/index.tsx
+++ b/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}
    >
--- a/app/javascript/mastodon/components/column_back_button.tsx
+++ b/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}
--- a/app/javascript/mastodon/components/column_header.tsx
+++ b/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}
--- a/app/javascript/mastodon/components/copy_paste_text.tsx
+++ b/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' />
--- a/app/javascript/mastodon/components/dropdown_menu.tsx
+++ b/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>
--- a/app/javascript/mastodon/components/edited_timestamp/index.tsx
+++ b/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}'
--- a/app/javascript/mastodon/components/hashtag_bar.tsx
+++ b/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}}'
--- a/app/javascript/mastodon/components/hotkeys/hotkeys.stories.tsx
+++ b/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.
--- a/app/javascript/mastodon/components/learn_more_link.tsx
+++ b/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'
--- a/app/javascript/mastodon/components/load_gap.tsx
+++ b/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 />
--- a/app/javascript/mastodon/components/load_pending.tsx
+++ b/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}}'
--- a/app/javascript/mastodon/components/poll.tsx
+++ b/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>{' '}
            ·{' '}
--- a/app/javascript/mastodon/components/status/boost_button.tsx
+++ b/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>
--- a/app/javascript/mastodon/components/status_quoted.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/about/components/section.tsx
+++ b/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'}
--- a/app/javascript/mastodon/features/account/components/domain_pill.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/alt_text_modal/index.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/compose/components/search.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx
+++ b/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} />
--- a/app/javascript/mastodon/features/interaction_modal/index.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/navigation_panel/components/more_link.tsx
+++ b/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' />
--- a/app/javascript/mastodon/features/navigation_panel/components/sign_in_banner.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_annual_report.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/notifications_v2/filter_bar.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/notifications_v2/index.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/search/components/search_section.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/search/index.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/ui/components/actions_modal.tsx
+++ b/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>
          );
--- a/app/javascript/mastodon/features/ui/components/boost_modal.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx
+++ b/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>
            </>
--- a/app/javascript/mastodon/features/ui/components/domain_block_modal.tsx
+++ b/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'
--- a/app/javascript/mastodon/features/ui/components/media_modal.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/ui/components/navigation_bar.tsx
+++ b/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>
--- a/app/javascript/mastodon/features/video/index.tsx
+++ b/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'
--- a/eslint.config.mjs
+++ b/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',
    },
  },
  {