SvelteKit 2, Svelte 5, accessibility fixes, and more #66
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Fix pnpm outdated command by regenerating lockfile with current pnpm version 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Prevent Vercel build output from being tracked in git 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Vite: 6.3.5 → 7.0.5 (requires Node.js 20+) - @sveltejs/vite-plugin-svelte: 5.1.1 → 6.1.0 (Svelte 5 compatibility) - Prettier: 2.8.8 → 3.6.2 (ESM migration, new defaults) - prettier-plugin-svelte: 2.10.1 → 3.4.0 (Prettier 3 compatibility) - svelte-check: 3.8.6 → 4.2.2 (improved Svelte 5 support) - focus-trap: 6.9.4 → 7.6.5 (drops IE support) - tabbable: 5.3.3 → 6.2.0 (improved focus behavior) Note: svelte-preprocess 6.x update skipped due to breaking changes requiring further investigation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
CSS & Build Tools: - cssnano: 5.1.15 → 7.1.0 (improved CSS optimization) Markdown & Documentation: - rehype-slug: 5.1.0 → 6.0.0 (ESM migration) - remark-github: 11.2.4 → 12.0.0 (unified ecosystem updates) - mdsvex: 0.9.8 → 0.12.6 (Svelte 5 compatibility) - mdsvexamples: 0.2.3 → 0.5.0 (updated examples system) Development & TypeScript: - svelte2tsx: 0.4.14 → 0.7.40 (enhanced Svelte 5 support) - vite-node: 0.1.27 → 3.2.4 (vitest 3.0 ecosystem) - @sveltejs/svelte-repl: 0.2.2 → 0.4.1 (improved REPL functionality) - prism-svelte: 0.4.7 → 0.5.0 (syntax highlighting improvements) All packages tested and verified working with development server and production builds. Project now fully up-to-date with latest major versions while maintaining Svelte 5 compatibility. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- svelte-preprocess: 5.1.4 → 6.0.3 (major version update) - Resolves deprecated errorMode option (replaced by verbatimModuleSyntax) - Improved TypeScript integration with better import type handling - Enhanced Svelte 5 compatibility and error reporting - Cleaner dependency tree with reduced package footprint The breaking change was automatically resolved as tsconfig.json already had verbatimModuleSyntax: true configured. All functionality verified: - Development server running successfully - Production build working correctly - TypeScript/SCSS processing functioning as expected This completes the comprehensive major dependency update cycle, bringing all packages to their latest versions while maintaining full Svelte 5 compatibility. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- @fec/remark-a11y-emoji: 3.1.0 → 4.0.2 (accessibility improvements) - vite-plugin-sveld: 1.1.0 → 2.0.0 (enhanced sveld integration) - sveld: added as dependency at 0.22.1 (peer dependency requirement) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Convert all self-closing div tags to properly closed div tags - Fixes Svelte build warnings about ambiguous self-closing HTML tags - Updated 4 files: ScrollView, Slider, TextBox components and test page 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Replace sveltekit:prefetch with data-sveltekit-preload-data="hover" - Fixes build warning about illegal ':' character in attributes - Migrates to SvelteKit 2 compatible preloading syntax 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Fix self-closing div in FlyoutWrapper backdrop element - Fix self-closing div in Slider tick elements - Resolves remaining Svelte build warnings about ambiguous self-closing HTML tags 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Update mdsvexamples config to use defaults.Wrapper instead of deprecated ExampleComponent - Replace marquee element with span to fix accessibility warning - Resolves build warnings about deprecated component usage and distracting elements 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Remove tabindex={-1} from purely decorative div element
- The div is just visual decoration and shouldn't be focusable
- Fixes accessibility warning about non-interactive element with tabindex
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Add role="presentation" to div with mousedown handler - The div is used for event bubbling prevention, not interaction - Fixes accessibility warning about missing ARIA role 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add role="button" to flyout wrapper with click/keydown handlers - Wrapper acts as a clickable trigger for opening/closing flyout - Fixes accessibility warning about missing ARIA role on interactive element 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add role="presentation" to flyout backdrop element - Add onkeydown handler to support Escape key for closing flyout - Fixes accessibility warnings about missing ARIA role and keyboard support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add tabindex="0" to ul element with aria-activedescendant attribute - ARIA specification requires elements with aria-activedescendant to be focusable - Fixes accessibility warning about missing tabindex 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add role="slider" to container div with tabindex and keyboard handlers - Container acts as the interactive slider element and should have proper role - Fixes accessibility warning about non-interactive element with tabindex 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Remove .auto-suggest-item-wrapper CSS class that is never used - Fixes build warning about unused CSS selector - Cleans up stylesheet by removing dead code 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add tabindex="0" to flyout wrapper with role="button" - Interactive elements with button role must be focusable - Fixes accessibility warning about missing tabindex on button role 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Import PrismJS language components for JavaScript, TypeScript, JSX, TSX, CSS, SCSS, JSON, regex, and Svelte to resolve "failed to load language" errors during build. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add keyboard event handler for backdrop interactions - Add role="presentation" to backdrop element - Ensure backdrop can be activated with Enter or Space keys 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Fix svelte:element 'this' attribute to use proper expression syntax
- Change from "h{headingLevel}" to {`h${headingLevel}`}
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Add role="presentation" to tooltip wrapper div with mouse event handlers - Resolves a11y_no_static_element_interactions warning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add proper tabindex handling based on ARIA role - Only interactive roles (option, button, menuitem) get tabindex=0 - Non-interactive listitem role gets no tabindex attribute - Improves code readability with computed variables 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add keyboard event handlers for wrapper, menu anchor, and backdrop - Add appropriate ARIA roles (button, menu, presentation) - Add tabindex="0" to wrapper for keyboard navigation - Preserve stopPropagation behavior for proper menu functionality - Fix self-closing div tag 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Use appropriate ARIA roles based on variant and state: - menuitemradio for radio variants - menuitemcheckbox for toggle variants and selected items - menuitem for standard items - Apply aria-checked only to checkbox/radio menu items - Use conditional tabindex spreading to avoid noninteractive element warnings 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add role="presentation" to context menu wrapper - Add role="menu" and tabindex="-1" to menu anchor element - Ensures proper ARIA roles for context menu interactions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add aria-level="2" to heading role element - Add aria-label="Previous page" to previous navigation button - Add aria-label="Next page" to next navigation button - Ensures proper ARIA attributes for screen readers 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add role="option" to list item for proper combobox semantics - Add aria-selected attribute to indicate selection state - Use conditional tabindex spreading to avoid noninteractive element warnings - Ensure proper focus management for disabled items 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Change aria-selected to aria-pressed for button elements - The button role supports aria-pressed but not aria-selected - Maintains proper state indication for selected calendar items 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Author
|
@Tropix126 is there any interest in this PR? |
Owner
Hi! First of all, before anything I want to say that this PR is some incredible work and I do plan to review it at some point. I've had my hands tied with some other (non-webdev) projects and school recently, but at some point in the next month or so I'm going to need to do some work on the Files site, which uses fluent-svelte and being able to update to Svelte 5 there was already one of the things I was procrastinating on. It's been a while since I've touched this project for a few of reasons, most of which boil down to a lack of time/motivation (and the fact that I no longer use windows as my primary OS, which makes digging through MUXC for resource values even more of a pain). Because of this, I don't really have a sense of direction going forward with this project's maintenance status (if that wasn't already clear enough), but at the very least I will do what I can to get this PR merged likely at some point in August. |
Author
|
@Tropix126 Thank you for the explanation. By my prodding comment I just wanted to know if this was something that would be considered at all; seeing as this project has been laying dormant for a while. I can understand other commitments; I was only able to do this because I have a long summer holiday, well-behaved kids and some spare time every morning. :) As long as I know that we'll get some movement on this at some point, I can very well reference a local development copy of fluent-svelte with my changes, and work with that until you are ready. BTW, I am working on a project website that started as a clone of the Files website (not a competing product or anything), and updating to SvelteKit 2/Svelte 5 once I had the changes in this branch was relatively painless. :) PS! Thanks for a wonderful project, good work! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
First, I'd like to apologize for the size and complexity of this pull request. This was the result of a multi-day hacking session where I needed to update a project that relies on Fluent Svelte to Svelte 5, and wasn't able to do so because of various errors I encountered along the way (especially the
svelte/internalreferences). So I just started looking at it, and after a few days I ended up with this.I know that accepting and reviewing such a big change, without any previous discussion around it, can be difficult. I really hope you are available to take the time to do so; as this project is really great and I would very much like to be able to rely on it going forward.
As part of this pull request, I've addressed the following issues:
{...$$restProps}on objects (in most cases).onclickinstead ofon:click.+page.mdnaming convention.tabindex).I have purposefully not opted in to using runes, that is something that could be addressed later if necessary. This means there are still some deprecated Svelte functionality being used (e.g.
createEventForwarder).I've been using Claude Code to write most of the code for this. I haven't been able to find if you had any guidelines around LLM usage, but I've been reviewing and manually testing components along the way.
I am open to any discussion around this PR, and I am also open to removing parts of it.