Merge remote-tracking branch 'origin/master' into feature/app-list-actions

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.20.3",
+  "version": "2.20.8",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

package.json

@@ -22,7 +22,7 @@
     "nx-cloud": "16.0.5",
     "prettier": "2.8.8",
     "prettier-plugin-svelte": "^2.3.0",
-    "svelte": "3.49.0",
+    "svelte": "^4.2.10",
     "svelte-eslint-parser": "^0.33.1",
     "typescript": "5.2.2",
     "yargs": "^17.7.2"

packages/account-portal

@@ -1 +1 @@
-Subproject commit 8c446c4ba385592127fa31755d3b64467b291882
+Subproject commit a851eeacabfaad8bff6e781f5e5a62063cbc31f3

packages/backend-core/src/middleware/joi-validator.ts

@@ -1,12 +1,12 @@
-import Joi, { ObjectSchema } from "joi"
+import Joi from "joi"
-import { BBContext } from "@budibase/types"
+import { Ctx } from "@budibase/types"
 
 function validate(
   schema: Joi.ObjectSchema | Joi.ArraySchema,
   property: string
 ) {
   // Return a Koa middleware function
-  return (ctx: BBContext, next: any) => {
+  return (ctx: Ctx, next: any) => {
     if (!schema) {
       return next()
     }
@@ -30,7 +30,6 @@ function validate(
     const { error } = schema.validate(params)
     if (error) {
       ctx.throw(400, `Invalid ${property} - ${error.message}`)
-      return
     }
     return next()
   }

packages/backend-core/tests/core/utilities/mocks/licenses.ts

@@ -58,7 +58,7 @@ export const useCloudFree = () => {
 // FEATURES
 
 const useFeature = (feature: Feature) => {
-  const license = cloneDeep(UNLIMITED_LICENSE)
+  const license = cloneDeep(getCachedLicense() || UNLIMITED_LICENSE)
   const opts: UseLicenseOpts = {
     features: [feature],
   }

packages/bbui/package.json

@@ -24,8 +24,7 @@
     "rollup": "^2.45.2",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-terser": "^7.0.2"
-    "svelte": "3.49.0"
   },
   "keywords": [
     "svelte"

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -41,6 +41,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
   class="btn-wrap"
   on:mouseover={() => (showTooltip = true)}

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -33,6 +33,8 @@
   setContext("actionMenu", { show, hide })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>

packages/bbui/src/Badge/Badge.svelte

@@ -13,6 +13,8 @@
   export let hoverable = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
   on:click
   class="spectrum-Label"

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -123,6 +123,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={preview}
   class="preview size--{size || 'M'}"
@@ -137,6 +139,8 @@
   />
 </div>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
   <Layout paddingX="XL" paddingY="L">
     <div class="container">

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -15,6 +15,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="property-group-container">
   {#if name}
     <div class="property-group-name" on:click={onHeaderClick}>

packages/bbui/src/FancyForm/FancyField.svelte

@@ -36,6 +36,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={ref}
   class="fancy-field"

packages/bbui/src/Form/Core/Combobox.svelte

@@ -35,6 +35,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="spectrum-InputGroup"
   class:is-focused={open || focus}

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -193,6 +193,8 @@
       aria-required="false"
       aria-haspopup="true"
     >
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         on:click={flatpickr?.open}
         class="spectrum-Textfield spectrum-InputGroup-textfield"
@@ -230,6 +232,7 @@
   </Flatpickr>
 {/key}
 {#if open}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="overlay" on:mousedown|self={flatpickr?.close} />
 {/if}
 

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -137,6 +137,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div class="container" class:compact>
   {#if selectedImage}
     {#if gallery}

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -96,6 +96,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="spectrum-InputGroup">
   <div
     class:is-disabled={disabled || hbsValue.length}

packages/bbui/src/Form/Core/File.svelte

@@ -50,6 +50,8 @@
   on:change={handleFile}
 />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="field">
   {#if value}
     <div class="file-view">

packages/bbui/src/Form/Core/InputDropdown.svelte

@@ -110,6 +110,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"

packages/bbui/src/Form/Core/Picker.svelte

@@ -146,6 +146,7 @@
     <use xlink:href="#spectrum-css-icon-Chevron100" />
   </svg>
 </button>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover
   anchor={customAnchor ? customAnchor : button}
   align={align || "left"}

packages/bbui/src/Form/Core/PickerDropdown.svelte

@@ -104,6 +104,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="spectrum-InputGroup" class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"

packages/bbui/src/Icon/Icon.svelte

@@ -24,6 +24,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon"
   on:mouseover={() => (showTooltip = true)}

packages/bbui/src/IconPicker/IconPicker.svelte

@@ -58,6 +58,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
   <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
     <div

packages/bbui/src/IconSideNav/IconSideNavItem.svelte

@@ -10,6 +10,8 @@
   let showTooltip = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon-side-nav-item"
   class:active

packages/bbui/src/Input/CopyInput.svelte

@@ -17,6 +17,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div>
   <Input readonly {value} {label} />
   <div class="icon" on:click={() => copyToClipboard(value)}>

packages/bbui/src/Layout/Page.svelte

@@ -43,6 +43,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    overflow-y: scroll !important;
     flex: 1 1 auto;
     overflow-x: hidden;
   }

packages/bbui/src/List/ListItem.svelte

@@ -15,6 +15,8 @@
   $: initials = avatar ? title?.[0] : null
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="list-item" class:hoverable on:click>
   <div class="left">
     {#if icon}

packages/bbui/src/Menu/Item.svelte

@@ -33,6 +33,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <li
   on:click|preventDefault={disabled ? null : onClick}
   class="spectrum-Menu-item"

packages/bbui/src/Modal/CustomContent.svelte

@@ -14,6 +14,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={increment}>
   Click me
   {remaining}

packages/bbui/src/Modal/Modal.svelte

@@ -100,6 +100,7 @@
   -->
   <Portal target=".modal-container">
     {#if visible}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
         <div
           class="background"

packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte

@@ -81,6 +81,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div>
   <div
     class="actions"

packages/bbui/src/Pagination/Pagination.svelte

@@ -10,6 +10,8 @@
   export let hasNextPage = true
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <nav class="spectrum-Pagination spectrum-Pagination--explicit">
   <div
     href="#"

packages/bbui/src/Popover/Popover.svelte

@@ -78,6 +78,7 @@
 </script>
 
 {#if open}
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <Portal {target}>
     <div
       tabindex="0"

packages/bbui/src/ProgressCircle/ProgressCircle.svelte

@@ -40,6 +40,8 @@
   export let overBackground
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   on:click
   class:spectrum-ProgressCircle--indeterminate={value == null}

packages/bbui/src/SideNavigation/Item.svelte

@@ -13,6 +13,8 @@
   export let badge = ""
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
   class="spectrum-SideNav-item"
   class:is-selected={selected}

packages/bbui/src/StatusLight/StatusLight.svelte

@@ -22,6 +22,8 @@
   export let hoverable = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   on:click
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"

packages/bbui/src/Table/InternalRenderer.svelte

@@ -19,6 +19,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click|stopPropagation={onClick}>
   <Icon size="S" name="Copy" />
 </div>

packages/bbui/src/Table/Table.svelte

@@ -303,6 +303,8 @@
 </script>
 
 {#key fields?.length}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="wrapper"
     class:wrapper--quiet={quiet}

packages/bbui/src/Tabs/Tab.svelte

@@ -48,6 +48,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   {id}
   bind:this={tab_internal}

packages/bbui/src/Tooltip/AbsTooltip.svelte

@@ -90,6 +90,7 @@
   onDestroy(hide)
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   bind:this={wrapper}
   class="abs-tooltip"

packages/bbui/src/Tooltip/TooltipWrapper.svelte

@@ -9,6 +9,7 @@
   let showTooltip = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class:container={!!tooltip}>
   <slot />
   {#if tooltip}

packages/bbui/src/Typography/Body.svelte

@@ -20,3 +20,9 @@
 >
   <slot />
 </p>
+
+<style>
+  p {
+    text-wrap: pretty;
+  }
+</style>

packages/bbui/src/Typography/Heading.svelte

@@ -21,4 +21,8 @@
   h1 {
     font-family: var(--font-accent);
   }
+
+  h1 {
+    text-wrap: balance;
+  }
 </style>

packages/builder/package.json

@@ -86,14 +86,13 @@
     "@rollup/plugin-replace": "^5.0.3",
     "@roxi/routify": "2.18.12",
     "@sveltejs/vite-plugin-svelte": "1.4.0",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/svelte": "^3.2.2",
+    "@testing-library/svelte": "^4.1.0",
     "babel-jest": "^29.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
     "jsdom": "^21.1.1",
     "ncp": "^2.0.0",
-    "svelte": "^3.49.0",
     "svelte-jester": "^1.3.2",
     "vite": "^4.5.0",
     "vite-plugin-static-copy": "^0.17.0",

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -110,6 +110,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ModalContent
   title="Add automation step"
   confirmText="Save"

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -46,6 +46,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="header" class:scrolling>
   <div class="header-left">
     <UndoRedoControl store={automationHistoryStore} />
@@ -130,6 +132,7 @@
     flex-grow: 1;
     padding: 23px 23px 80px;
     box-sizing: border-box;
+    overflow-x: hidden;
   }
 
   .header.scrolling {

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -103,6 +103,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class={`block ${block.type} hoverable`} class:selected on:click={() => {}}>
   {#if loopBlock}
     <div class="blockSection">

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte

@@ -93,6 +93,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class:typing={typing && !automationNameError}
   class:typing-error={automationNameError}

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -46,6 +46,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ModalContent
   title="Create Automation"
   confirmText="Save"

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -65,6 +65,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="root">
   <div class="spacer" />
   {#each fieldsArray as field}

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -757,6 +757,8 @@
   />
 </Modal>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Column"

packages/builder/src/components/backend/DataTable/modals/ExportModal.test.js

@@ -32,6 +32,7 @@ vi.mock("svelte", async () => {
     },
     createEventDispatcher: vi.fn(),
     onDestroy: vi.fn(),
+    tick: vi.fn(),
   }
 })
 

packages/builder/src/components/backend/TableNavigator/ListItem.svelte

@@ -6,6 +6,8 @@
   export let indented
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class:indented class:selected on:click class={className}>
   <i class={icon} />
   <span>{title}</span>

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -237,6 +237,8 @@
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <ModalContent
   size="L"
   showCancelButton={false}

packages/builder/src/components/common/DashCard.svelte

@@ -8,6 +8,8 @@
   $: actionDefined = typeof action === "function"
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dash-card">
   <div class="dash-card-header" class:active={actionDefined} on:click={action}>
     <span class="dash-card-title">

packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte

@@ -1,3 +1,5 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dropdown-container" on:click>
   <slot />
 </div>

packages/builder/src/components/common/Dropdowns/DropdownItem.svelte

@@ -5,6 +5,7 @@
   export let disabled = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dropdown-item" class:disabled on:click {...$$restProps}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">

packages/builder/src/components/common/EditableIcon.svelte

@@ -11,6 +11,8 @@
   let modal
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="editable-icon">
   <div class="hover" on:click={modal.show}>
     <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />

packages/builder/src/components/common/Icons/Pencil.svelte

@@ -1,3 +1,5 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <svg
   on:click
   xmlns="http://www.w3.org/2000/svg"

packages/builder/src/components/common/NavHeader.svelte

@@ -39,6 +39,7 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="header" class:search>
   <input
     readonly={!search}

packages/builder/src/components/common/NavItem.svelte

@@ -60,6 +60,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="nav-item"
   class:hovering

packages/builder/src/components/common/bindings/BindingPicker.svelte

@@ -103,6 +103,9 @@
   </Popover>
 </span>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 <Layout noPadding gap="S">
   {#if selectedCategory}
     <div class="sub-section-back">

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -57,6 +57,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
   <Combobox
     {label}

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -60,6 +60,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
   <Input
     {label}

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -125,6 +125,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
   {#if !isValid(value)}
     <Input

packages/builder/src/components/common/bindings/ModalBindableInput.svelte

@@ -35,6 +35,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control">
   <Input
     {label}

packages/builder/src/components/deploy/AppActions.svelte

@@ -149,6 +149,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="action-top-nav">
   <div class="action-buttons">
     {#if updateAvailable && $isOnlyUser}

packages/builder/src/components/design/Panel.svelte

@@ -22,6 +22,8 @@
   $: customTitleContent = $$slots["panel-title-content"]
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="panel"
   class:wide

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -249,6 +249,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 <DrawerContent>
   <Layout noPadding gap="S" slot="sidebar">
     {#if showAvailableActions || !actions?.length}

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte

@@ -94,6 +94,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="button-configuration">
   {#if buttonCount}
     <DraggableList

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte

@@ -85,6 +85,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <DrawerContent>
   <div class="container">
     <Layout noPadding gap="S">

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte

@@ -16,6 +16,7 @@
     <Heading size="XS">{heading}</Heading>
   </div>
 {/if}
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ul class="spectrum-Menu" role="listbox">
   {#each dataSet as data}
     <li

packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte

@@ -80,6 +80,9 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 <ul
   class="list-wrap"
   use:dndzone={{

packages/builder/src/components/design/settings/controls/FlatButtonGroup/FlatButton.svelte

@@ -8,6 +8,8 @@
   $: useIcon = !!icon
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />

packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte

@@ -116,11 +116,14 @@
   $: pagerText = `Page ${currentPage} of ${totalPages}`
 </script>
 
+a11y-click-events-have-key-events
 <div bind:this={buttonAnchor}>
   <ActionButton on:click={dropdown.show}>
     {displayValue}
   </ActionButton>
 </div>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
   <div class="container">
     <div class="search-area">

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -5,6 +5,8 @@
   export let disabled = false
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="side-nav-item">
   {#if url}
     <a class="text" on:click href={url} class:active class:disabled>

packages/builder/src/components/settings/UserGroupPicker.svelte

@@ -39,6 +39,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
   <Layout gap="S">
     <div class="header">

packages/builder/src/components/start/AppRow.svelte

@@ -39,6 +39,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="app-row"
   on:click={lockedAction || handleDefaultClick}

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -58,6 +58,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
   <div class="scrollable-icons">
     <div class="title-spacing">

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -539,6 +539,8 @@
 
 <svelte:window on:keydown={handleKeyDown} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   transition:fly={{ x: 400, duration: 260 }}
   id="builder-side-panel-container"

packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte

@@ -24,6 +24,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="preview-overlay"
   transition:fade={{ duration: 260 }}

packages/builder/src/pages/builder/app/[application]/data/_components/DatasourceOption.svelte

@@ -6,6 +6,8 @@
   export let disabled
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click class:disabled class="option">
   <div class="header">
     <div class="icon">

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfigButton.svelte

@@ -54,6 +54,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="button" on:click>
   <div class="left">
     {#if datasource.source !== IntegrationTypes.REST}

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte

@@ -27,6 +27,8 @@
   <CreateTableModal />
 </Modal>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <section>
   <Layout>
     <Layout gap="XS" noPadding>

packages/builder/src/pages/builder/app/[application]/data/datasource/datasource_internal_bb_default/index.svelte

@@ -25,6 +25,8 @@
   <CreateTableModal />
 </Modal>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <section>
   <Layout>
     <Layout gap="XS" noPadding>

packages/builder/src/pages/builder/app/[application]/data/new.svelte

@@ -77,7 +77,7 @@
     </DatasourceOption>
     <DatasourceOption
       on:click={() => internalTableModal.show({ promptUpload: true })}
-      title="Upload data"
+      title="Upload CSV / JSON"
       description="Non-relational"
       {disabled}
     >

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte

@@ -149,6 +149,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <DrawerContent>
   <div class="container">
     <Layout noPadding>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte

@@ -45,6 +45,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <DrawerContent>
   <div class="container">
     <Layout noPadding gap="S">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte

@@ -12,6 +12,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
   {#each Constants.Themes as theme}
     <div

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte

@@ -219,6 +219,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
   <Panel
     title="Add component"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -236,6 +236,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="component-container">
   {#if loading}
     <div class="center">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte

@@ -63,6 +63,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   on:scroll
   bind:this={scrollRef}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -86,6 +86,8 @@
   const hover = hoverStore.hover
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <ul>
   {#each filteredComponents || [] as component, index (component._id)}
     {@const opened = isOpen(component, $selectedComponentPath, openNodes)}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte

@@ -45,6 +45,8 @@
   const hover = hoverStore.hover
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="components">
   <div class="header" class:scrolling>
     <Body size="S">Components</Body>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte

@@ -16,6 +16,7 @@
       : `Requires ${role?.name} access`
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="container"
   on:mouseover={() => (showTooltip = true)}

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceTemplateRow.svelte

@@ -7,6 +7,8 @@
   $: icon = datasource.type === "viewV2" ? "Remove" : "Table"
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="data-source-entry" class:selected on:click>
   <Icon name={icon} color="var(--spectrum-global-color-gray-600)" />
   {datasource.label}

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte

@@ -14,6 +14,8 @@
   $: hasScreens = $screenStore.screens?.length
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="page">
   <CreationPage
     showClose={!!onClose}

packages/builder/src/pages/builder/auth/forgot.svelte

@@ -44,6 +44,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <TestimonialPage enabled={$organisation.testimonialsEnabled}>
   <Layout gap="S" noPadding>
     <img alt="logo" src={$organisation.logoUrl || Logo} />

packages/builder/src/pages/builder/portal/_components/Logo.svelte

@@ -4,6 +4,8 @@
   import { organisation } from "stores/portal"
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <img
   src={$organisation.logoUrl || Logo}
   alt="Budibase Logo"

packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte

@@ -15,6 +15,8 @@
   const close = () => dispatch("close")
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if visible}
   <div
     class="mobile-nav-underlay"
@@ -22,6 +24,8 @@
     on:click={close}
   />
 {/if}
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="mobile-nav" class:visible>
   <Layout noPadding gap="M">
     <div on:click={close}>

packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte

@@ -10,7 +10,7 @@
   {#if $admin.cloud && $auth?.user?.accountPortalAccess}
     <Button
       cta
-      size="S"
+      size="M"
       on:click
       on:click={() => {
         window.open($admin.accountPortalUrl + "/portal/upgrade", "_blank")
@@ -21,7 +21,7 @@
   {:else if !$admin.cloud && sdk.users.isAdmin($auth.user)}
     <Button
       cta
-      size="S"
+      size="M"
       on:click={() => $goto("/builder/portal/account/upgrade")}
       on:click
     >