[Chore/Refactor] Add missing 'type' attribute on 'button' components (#26249)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: asukaminato0721 <30024051+asukaminato0721@users.noreply.github.com>

web/app/components/base/app-icon-picker/ImageInput.tsx

@@ -106,7 +106,7 @@ const ImageInput: FC<UploaderProps> = ({
               <ImagePlus className="pointer-events-none mb-3 h-[30px] w-[30px]" />
               <div className="mb-[2px] text-sm font-medium">
                 <span className="pointer-events-none">{t('common.imageInput.dropImageHere')}&nbsp;</span>
-                <button className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>{t('common.imageInput.browse')}</button>
+                <button type="button" className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>{t('common.imageInput.browse')}</button>
                 <input
                   ref={inputRef} type="file" className="hidden"
                   onClick={e => ((e.target as HTMLInputElement).value = '')}

web/app/components/base/app-icon-picker/index.tsx

@@ -117,7 +117,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
       <div className='flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary'>
         {tabs.map(tab => (
-          <button
+          <button type="button"
             key={tab.key}
             className={cn(
               'system-sm-medium flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 text-text-tertiary',

web/app/components/base/audio-btn/index.tsx

@@ -85,7 +85,7 @@ const AudioBtn = ({
       <Tooltip
         popupContent={tooltipContent}
       >
-        <button
+        <button type="button"
           disabled={audioState === 'loading'}
           className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
           onClick={handleToggle}

web/app/components/base/audio-gallery/AudioPlayer.tsx

@@ -288,7 +288,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src }) => {
   return (
     <div className='flex h-9 min-w-[240px] max-w-[420px] items-end gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-sm'>
       <audio ref={audioRef} src={src} preload="auto"/>
-      <button className='inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled' onClick={togglePlay} disabled={!isAudioAvailable}>
+      <button type="button" className='inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled' onClick={togglePlay} disabled={!isAudioAvailable}>
         {isPlaying
           ? (
             <RiPauseCircleFill className='h-5 w-5' />

web/app/components/base/chat/chat/content-switch.tsx

@@ -16,7 +16,7 @@ export default function ContentSwitch({
   return (
     count && count > 1 && currentIndex !== undefined && (
       <div className="flex items-center justify-center pt-3.5 text-sm">
-        <button
+        <button type="button"
           className={`${prevDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={prevDisabled}
           onClick={() => !prevDisabled && switchSibling('prev')}
@@ -26,7 +26,7 @@ export default function ContentSwitch({
         <span className="px-2 text-xs text-text-primary">
           {currentIndex + 1} / {count}
         </span>
-        <button
+        <button type="button"
           className={`${nextDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={nextDisabled}
           onClick={() => !nextDisabled && switchSibling('next')}

web/app/components/base/date-and-time-picker/calendar/item.tsx

@@ -13,7 +13,7 @@ const Item: FC<CalendarItemProps> = ({
   const isToday = date.isSame(dayjs(), 'date')
 
   return (
-    <button
+    <button type="button"
       onClick={() => onClick(date)}
       className={cn(
         'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',

web/app/components/base/date-and-time-picker/date-picker/header.tsx

@@ -14,7 +14,7 @@ const Header: FC<DatePickerHeaderProps> = ({
   return (
     <div className='mx-2 mt-2 flex items-center'>
       <div className='flex-1'>
-        <button
+        <button type="button"
           onClick={handleOpenYearMonthPicker}
           className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
         >
@@ -22,13 +22,13 @@ const Header: FC<DatePickerHeaderProps> = ({
           <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
         </button>
       </div>
-      <button
+      <button type="button"
         onClick={onClickPrevMonth}
         className='rounded-lg p-1.5 hover:bg-state-base-hover'
       >
         <RiArrowUpSLine className='h-[18px] w-[18px] text-text-secondary' />
       </button>
-      <button
+      <button type="button"
         onClick={onClickNextMonth}
         className='rounded-lg p-1.5 hover:bg-state-base-hover'
       >

web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx

@@ -13,7 +13,7 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
   return (
     <div className='flex border-b-[0.5px] border-divider-regular p-2 pb-1'>
       {/* Year and Month */}
-      <button
+      <button type="button"
         onClick={onClick}
         className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
       >

web/app/components/base/mermaid/index.tsx

@@ -541,7 +541,7 @@ const Flowchart = (props: FlowchartProps) => {
       {svgString && (
         <div className={themeClasses.mermaidDiv} style={{ objectFit: 'cover' }} onClick={handlePreviewClick}>
           <div className="absolute bottom-2 left-2 z-[100]">
-            <button
+            <button type="button"
               onClick={(e) => {
                 e.stopPropagation()
                 toggleTheme()

web/app/components/base/pagination/pagination.tsx

@@ -30,7 +30,7 @@ export const PrevButton = ({
   className,
   children,
   dataTestId,
-  as = <button />,
+  as = <button type="button" />,
   ...buttonProps
 }: ButtonProps) => {
   const pagination = React.useContext(PaginationContext)
@@ -65,7 +65,7 @@ export const NextButton = ({
   className,
   children,
   dataTestId,
-  as = <button />,
+  as = <button type="button" />,
   ...buttonProps
 }: ButtonProps) => {
   const pagination = React.useContext(PaginationContext)

web/app/components/base/select/locale-signin.tsx

@@ -39,7 +39,7 @@ export default function LocaleSigninSelect({
             <div className="max-h-96 overflow-y-auto px-1 py-1 [mask-image:linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)]">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
-                  <button
+                  <button type="button"
                     className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-[active]:bg-state-base-hover'}
                     onClick={(evt) => {
                       evt.preventDefault()

web/app/components/base/select/locale.tsx

@@ -39,7 +39,7 @@ export default function Select({
             <div className="px-1 py-1 ">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
-                  <button
+                  <button type="button"
                     className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-[active]:bg-state-base-hover'}
                     onClick={(evt) => {
                       evt.preventDefault()

web/app/components/base/theme-selector.tsx

@@ -54,7 +54,7 @@ export default function ThemeSelector() {
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
         <div className='flex w-[144px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
-          <button
+          <button type="button"
             className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
             onClick={() => handleThemeChange('light')}
           >
@@ -66,7 +66,7 @@ export default function ThemeSelector() {
               <RiCheckLine className='h-4 w-4 text-text-accent' />
             </div>}
           </button>
-          <button
+          <button type="button"
             className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
             onClick={() => handleThemeChange('dark')}
           >
@@ -78,7 +78,7 @@ export default function ThemeSelector() {
               <RiCheckLine className='h-4 w-4 text-text-accent' />
             </div>}
           </button>
-          <button
+          <button type="button"
             className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
             onClick={() => handleThemeChange('system')}
           >

web/app/components/base/toast/index.spec.tsx

@@ -13,10 +13,10 @@ const TestComponent = () => {
 
   return (
     <div>
-      <button onClick={() => notify({ message: 'Notification message', type: 'info' })}>
+      <button type="button" onClick={() => notify({ message: 'Notification message', type: 'info' })}>
         Show Toast
       </button>
-      <button onClick={close}>Close Toast</button>
+      <button type="button" onClick={close}>Close Toast</button>
     </div>
   )
 }

web/app/components/base/video-gallery/VideoPlayer.tsx

@@ -234,13 +234,13 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src }) => {
           </div>
           <div className={styles.controlsContent}>
             <div className={styles.leftControls}>
-              <button className={styles.playPauseButton} onClick={togglePlayPause}>
+              <button type="button" className={styles.playPauseButton} onClick={togglePlayPause}>
                 {isPlaying ? <PauseIcon /> : <PlayIcon />}
               </button>
               {!isSmallSize && (<span className={styles.time}>{formatTime(currentTime)} / {formatTime(duration)}</span>)}
             </div>
             <div className={styles.rightControls}>
-              <button className={styles.muteButton} onClick={toggleMute}>
+              <button type="button" className={styles.muteButton} onClick={toggleMute}>
                 {isMuted ? <UnmuteIcon /> : <MuteIcon />}
               </button>
               {!isSmallSize && (
@@ -264,7 +264,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src }) => {
                   </div>
                 </div>
               )}
-              <button className={styles.fullscreenButton} onClick={toggleFullscreen}>
+              <button type="button" className={styles.fullscreenButton} onClick={toggleFullscreen}>
                 <FullscreenIcon />
               </button>
             </div>