When running a build of my SvelteKit project, A11y warnings listed for following Bootstrap's recommendation

[nstuyvesant]

Describe the bug

When I run a build, I get messages such as:

7:54:00 AM [vite-plugin-svelte] /Users/nates/dev/shy-svelte/src/routes/admin/+page.svelte:163:1 A11y: not interactive element cannot have positive tabIndex value
161:   </div>
162: 
163:   <div
       ^
164:     class="tab-pane fade"
165:     id="users-content"

The actual code looks like this:

	<div
		class="tab-pane fade show active"
		id="dashboard-content"
		role="tabpanel"
		aria-labelledby="dashboard-content"
		tabindex="0"
	>
		<DashboardComponent />
	</div>

Per Bootstrap 5.2's documentation...

In general, to facilitate keyboard navigation, it’s recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you’ll need to explicitly make your tab panels focusable by adding tabindex="0" in your markup.

Reproduction

See above.

Logs

No response

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 204.50 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - /opt/homebrew/bin/node
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Firefox: 105.0.3
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-node: latest => 1.0.0-next.98 
    @sveltejs/kit: latest => 1.0.0-next.515 
    svelte: ^3.51.0 => 3.51.0 
    vite: ^3.1.8 => 3.1.8

Severity

annoyance

[bluwy]

This is tracked in sveltejs/svelte#820, specifically the interactive-supports-focus rule.