svelte-navigator
a11y-dialog
Our great sponsors
svelte-navigator | a11y-dialog | |
---|---|---|
4 | 3 | |
503 | 2,372 | |
- | - | |
0.0 | 8.7 | |
4 months ago | 5 days ago | |
JavaScript | JavaScript | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
svelte-navigator
-
Click on a tag reloads Page
I went to the svelte-navigator github repo and they say that they support SSR. Now, if you use only ssr and not csr, that will reload the page on every navigation.That is because in ssr your front-end asks for entire page from server and doesn't just update components in front-end. For instance here they provide an example with ssr: https://github.com/mefechoel/svelte-navigator/tree/main/example/ssr
-
Svelte is Fantastic but getting a job is nearly impossible!
Well, depending on your project, you could try svelte-navigator.
-
What frustrates you in using Svelte?
But yeah, at the end of the day I guess the actual problem here is that the docs are more opinionated towards Sveltekit. I guess they're focusing on Sveltekit right now so I understand why they wouldn't want to maintain a whole separate project for the router like react, vue, etc right now. But maybe making the docs less opinionated and adding more examples for other use cases would be ideal. I ended up using svelte without sveltekit + this client router for svelte + golang and we are very happy with the results.
- "TypeError: append_styles is not a function" ... because of svelte-navigator?
a11y-dialog
-
How would you improve this warning modal and add some red or yellow color to it?
If it's a warning it should probably be role="alertdialog" rather than role="dialog". This will allow assistive devices to prioritize its content and trigger things like an alert sound. You probably also want to put keyboard focus on the least destructive action, which in your case would be the "save changes" button, rather than leaving keyboard focus above the close button. Here's a script by Kitty Giraudel that will do most of this for you, if you want.
-
New WebKit Features in Safari 15.4
On that note, TIL about screen reader issues related to dialogs in general, including this built-in. Seems like the question is primarily around how to update the focus target from the "invoking element" to the dialog's content in a reader-friendly way. There's a linked post from the MDN docs with more detail https://www.scottohara.me/blog/2019/03/05/open-dialog.html#i.... They actually still recommend a custom implementation that's considered more robust when used with screen readers: https://github.com/KittyGiraudel/a11y-dialog. I'm glad there's a callout on the MDN docs as I would have assumed this dialog element is screen reader clean. Focus management is always a tough thing regardless.
- HugoGiraudel/a11y-dialog: A lightweight and flexible accessible modal dialog
What are some alternatives?
chakra-ui-vue - ⚡️ Build scalable and accessible Vue.js applications with ease.
pa11y - Pa11y is your automated accessibility testing pal
eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.
dialog-polyfill - Polyfill for the HTML dialog element
axe-core - Accessibility engine for automated Web UI testing
caniuse - Raw browser/feature support data from caniuse.com
sveltekit-accessibility-testing - Demo code for adding axe accessibility testing to SvelteKit using Playwright and pa11y
standards-positions
svelte-testing-library - :chipmunk: Simple and complete Svelte DOM testing utilities that encourage good testing practices
electron-svelte-typescript-esbuild-template - Starter kit to build cross-platform desktop apps with Electron, Svelte, TypeScript and Esbuild.