diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index 2aa885cfcb..0000000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '' -labels: 'Bug' -assignees: '' - ---- - -## Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it. - -**Describe the bug** -A clear and concise description of what the bug is. - -**Logs** -Please include browser console and server logs around the time this bug occurred. - -**To Reproduce** -To help us help you, if you've found a bug please consider the following: - -* If you can demonstrate the bug using https://svelte.dev/repl, please do. -* If that's not possible, we recommend creating a small repo that illustrates the problem. -* Reproductions should be small, self-contained, correct examples – http://sscce.org. - -Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster. - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Stacktraces** -If you have a stack trace to include, we recommend putting inside a `
` block for the sake of the thread's readability: - -
- Stack trace - - Stack trace goes here... -
- -**Information about your Svelte project:** -To make your life easier, just run `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers` and paste the output here. - -- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) - -- Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc) - -- Svelte version (Please check you can reproduce the issue with the latest release!) - -- Whether your project uses Webpack or Rollup - -**Severity** -How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely? - -Note: the more honest and specific you are here the more we will take you seriously. - -**Additional context** -Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 0000000000..38a971864b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,50 @@ +name: "\U0001F41E Bug report" +description: Report an issue with Svelte +labels: ["triage: bug"] +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this bug report! + - type: textarea + id: bug-description + attributes: + label: Describe the bug + description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! + placeholder: Bug description + validations: + required: true + - type: textarea + id: reproduction + attributes: + label: Reproduction + description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed. + placeholder: Reproduction + validations: + required: true + - type: textarea + id: logs + attributes: + label: Logs + description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text." + render: shell + - type: textarea + id: system-info + attributes: + label: System Info + description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers` + render: shell + placeholder: System, Binaries, Browsers + validations: + required: true + - type: dropdown + id: severity + attributes: + label: Severity + description: Select the severity of this issue + options: + - annoyance + - blocking an upgrade + - blocking all usage of svelte + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000000..ee3e5a41b9 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,5 @@ +blank_issues_enabled: false +contact_links: + - name: Discord Chat + url: https://svelte.dev/chat + about: Ask questions and discuss with other Svelte users in real time. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 923bfdb50c..0000000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '' -labels: 'New Feature' -assignees: '' - ---- - - - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. For example: I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**How important is this feature to you?** -Note: the more honest and specific you are here the more we will take you seriously. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 0000000000..2174f851a0 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -0,0 +1,42 @@ +name: "Feature Request" +description: Request a new Svelte feature +labels: [enhancement] +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs). + - type: textarea + id: problem + attributes: + label: Describe the problem + description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better. + placeholder: I'm always frustrated when... + validations: + required: true + - type: textarea + id: solution + attributes: + label: Describe the proposed solution + description: Please provide a clear and concise description of what you would like to happen. + placeholder: I would like to see... + validations: + required: true + - type: textarea + id: alternatives + attributes: + label: Alternatives considered + description: "Please provide a clear and concise description of any alternative solutions or features you've considered." + validations: + required: true + - type: dropdown + id: importance + attributes: + label: Importance + description: How important is this feature to you? + options: + - nice to have + - would make my life easier + - i cannot use svelte without it + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/questions-and-help.md b/.github/ISSUE_TEMPLATE/questions-and-help.md deleted file mode 100644 index a6e0dc6e19..0000000000 --- a/.github/ISSUE_TEMPLATE/questions-and-help.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -name: Questions and help -about: If you think you need help with something related to Svelte -title: '' -labels: 'Question' -assignees: '' - ---- - -This issue tracker is intended to collect bug reports and feature requests. - -For help with installation, information on how features work, or questions about specific features of Svelte, please come and join us in the [Svelte Discord](https://svelte.dev/chat), or ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte). Any issues open for help requests will be closed to keep from clogging up the issue tracker. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d14a0f9fe4..7de5a35e13 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,5 +1,6 @@ ### Before submitting the PR, please make sure you do the following - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs +- [ ] Prefix your PR title with `[feat]`, `[fix]`, `[chore]`, or `[docs]`. - [ ] This message body should clearly illustrate what problems it solves. - [ ] Ideally, include a test that fails without this PR but passes with it. diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 0000000000..3bc3fa6b99 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,52 @@ +# Configuration for probot-stale - https://github.com/probot/stale + +# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled) +onlyLabels: [] + +# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable +exemptLabels: + - popular + - pinned + - security + - bug + - "[Status] Maybe Later" + +# Set to true to ignore issues in a project (defaults to false) +exemptProjects: false + +# Set to true to ignore issues in a milestone (defaults to false) +exemptMilestones: false + +# Set to true to ignore issues with an assignee (defaults to false) +exemptAssignees: false + +# Label to use when marking as stale +staleLabel: stale-bot + +# Comment to post when removing the stale label. +# unmarkComment: > +# Your comment here. + +# Limit the number of actions per hour, from 1-30. Default is 30 +limitPerRun: 30 + +# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls': +pulls: + daysUntilStale: 210 + daysUntilClose: 25 + markComment: > + This pull request has been automatically marked as stale because it has not had + recent activity. It will be closed if no further activity occurs. Thank you + for your contributions. + closeComment: > + This pull request has been closed as it was previously marked as stale and saw no subsequent activity. + +issues: + daysUntilStale: 180 + daysUntilClose: 14 + markComment: > + This issue has been automatically marked as stale because it has not had + recent activity. It will be closed if no further activity occurs. Thank you + for your contributions. + closeComment: > + This issue has been closed as it was previously marked as stale and saw no subsequent activity. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 406aab993a..f6a9fdf42f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,37 +9,24 @@ jobs: node-version: [8, 10, 12, 14] os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - id: npm-cache-dir - run: echo "::set-output name=dir::$(npm config get cache)" - - uses: actions/cache@v2 - id: npm-cache - with: - path: ${{ steps.npm-cache-dir.outputs.dir }} - key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} - restore-keys: ${{ runner.os }}-node- - - run: npm install - - run: npm test - env: - CI: true + - uses: actions/checkout@v1 + - uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: npm + - run: npm install + - run: npm test + env: + CI: true Lint: runs-on: ubuntu-latest timeout-minutes: 5 steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - - id: npm-cache-dir - run: echo "::set-output name=dir::$(npm config get cache)" - - uses: actions/cache@v2 - id: npm-cache - with: - path: ${{ steps.npm-cache-dir.outputs.dir }} - key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} - restore-keys: ${{ runner.os }}-node- - - run: 'npm i && npm run lint' + - uses: actions/checkout@v1 + - uses: actions/setup-node@v2 + with: + cache: npm + - run: 'npm i && npm run lint' Unit: runs-on: ${{ matrix.os }} timeout-minutes: 10 @@ -47,14 +34,8 @@ jobs: matrix: os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - - id: npm-cache-dir - run: echo "::set-output name=dir::$(npm config get cache)" - - uses: actions/cache@v2 - id: npm-cache - with: - path: ${{ steps.npm-cache-dir.outputs.dir }} - key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} - restore-keys: ${{ runner.os }}-node- - - run: 'npm i && npm run test:unit' + - uses: actions/checkout@v1 + - uses: actions/setup-node@v2 + with: + cache: npm + - run: 'npm i && npm run test:unit' diff --git a/.gitignore b/.gitignore index bddabf688b..911ff19cab 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ node_modules /compiler.d.ts /compiler.*js /index.*js +/ssr.*js /internal /store /easing @@ -30,8 +31,6 @@ _output /site/static/svelte-app.json /site/static/contributors.jpg /site/static/workers -/site/static/organisations /site/scripts/svelte-app /site/scripts/community /site/src/routes/_contributors.js -/site/src/routes/_components/WhosUsingSvelte.* diff --git a/CHANGELOG.md b/CHANGELOG.md index 89249634bb..dadb5cd406 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,79 @@ # Svelte changelog -## Unreleased - -* Fix type signatures of `writable` and `readable`. It's possible to invoke them without arguments ([#6291](https://github.com/sveltejs/svelte/issues/6291), [#6345](https://github.com/sveltejs/svelte/issues/6345)) +## 3.41.0 + +* Support `export { ... } from` syntax in components ([#2214](https://github.com/sveltejs/svelte/issues/2214)) +* Support `export let { ... } =` syntax in components ([#5612](https://github.com/sveltejs/svelte/issues/5612)) +* Support `{#await ... then/catch}` without a variable for the resolved/rejected value ([#6270](https://github.com/sveltejs/svelte/issues/6270)) + +## 3.40.3 + +* Fix `` data when a transition is cancelled before completing ([#5394](https://github.com/sveltejs/svelte/issues/5394)) +* Fix destructuring into variables beginning with `$` so that they result in store updates ([#5653](https://github.com/sveltejs/svelte/issues/5653)) +* Fix `in:` transition configuration not properly updating when it's changed after its initial creation ([#6505](https://github.com/sveltejs/svelte/issues/6505)) +* Fix applying `:global()` for `>` selector combinator ([#6550](https://github.com/sveltejs/svelte/issues/6550)) +* Fix mounting component at detached DOM node ([#6567](https://github.com/sveltejs/svelte/issues/6567)) + +## 3.40.2 + +* Fix dynamic `autofocus={...}` attribute handling ([#4995](https://github.com/sveltejs/svelte/issues/4995)) +* Add filename to combined source map if needed ([#6089](https://github.com/sveltejs/svelte/pull/6089)) +* In AST, parse empty attribute values as an empty string ([#6286](https://github.com/sveltejs/svelte/issues/6286)) +* Fix tracking whether transition has started ([#6399](https://github.com/sveltejs/svelte/pull/6399)) +* Fix incorrect scoping of `:global()` selectors ([#6550](https://github.com/sveltejs/svelte/issues/6550)) + +## 3.40.1 + +* Fix store reactivity regression when using reactive statements ([#6557](https://github.com/sveltejs/svelte/issues/6557)) + +## 3.40.0 + +* Support rendering a component in a shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869)) +* Fix `:root` selector being erroneously scoped to component ([#4767](https://github.com/sveltejs/svelte/issues/4767)) +* Fix `.end` in AST for expressions inside attributes ([#6258](https://github.com/sveltejs/svelte/issues/6258)) +* Fix one-way `` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). +On `` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly. ```sv @@ -1236,6 +1240,74 @@ As with DOM events, if the `on:` directive is used without a value, the componen ``` +#### [--style-props](style_props) + +```sv +--style-props="anycssvalue" +``` + +--- + +As of [Svelte 3.38](https://github.com/sveltejs/svelte/issues/6268) ([RFC](https://github.com/sveltejs/rfcs/pull/13)), you can pass styles as props to components for the purposes of theming, using CSS custom properties. + +Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example: + +```sv + +``` + +--- + +Desugars to this: + +```sv +
+ +
+``` + +**Note**: Since this is an extra div, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature. Also note that not all browsers support `display: contents`: https://caniuse.com/css-display-contents + +--- + +Svelte's CSS Variables support allows for easily themable components: + +```sv + + +``` + +--- + +So you can set a high level theme color: + +```css +/* global.css */ +html { + --theme-color: black; +} +``` + +--- + +Or override it at the consumer level: + +```sv + +``` #### [bind:*property*](bind_component_property) @@ -1376,7 +1448,7 @@ Note that explicitly passing in an empty named slot will add that slot's name to ``` -#### [``](slot_let) +#### [``](slot_let) --- @@ -1475,6 +1547,8 @@ If `this` is falsy, no component is rendered. The `` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering. +Contrary to `` this element can only be at the top level of your component and must never be inside a block or element. + ```sv ``` +#### `getAllContexts` + +```js +contexts: Map = getAllContexts() +``` + +--- + +Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it. + +```sv + +``` + #### `createEventDispatcher` ```js @@ -294,6 +314,8 @@ const unsubscribe = count.subscribe(value => { unsubscribe(); // logs 'no more subscribers' ``` +Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`. + #### `readable` ```js @@ -752,7 +774,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts * `easing` (`function`, default `cubicInOut`) — an [easing function](docs#svelte_easing) -The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it. +The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it. ```sv + +{#if condition} +

BIG ELEM

+{:else} + small elem +{/if} +``` ### `svelte/animate` @@ -899,7 +949,7 @@ The following initialisation options can be provided: | option | default | description | | --- | --- | --- | -| `target` | **none** | An `HTMLElement` to render to. This option is required +| `target` | **none** | An `HTMLElement` or `ShadowRoot` to render to. This option is required | `anchor` | `null` | A child of `target` to render the component immediately before | `props` | `{}` | An object of properties to supply to the component | `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md index 361c9cdbc4..43812426a5 100644 --- a/site/content/docs/04-compile-time.md +++ b/site/content/docs/04-compile-time.md @@ -44,7 +44,9 @@ The following options can be passed to the compiler. None are required: | `filename` | string | `null` | `name` | string | `"Component"` | `format` | `"esm"` or `"cjs"` | `"esm"` -| `generate` | `"dom"` or `"ssr"` | `"dom"` +| `generate` | `"dom"` or `"ssr"` or `false` | `"dom"` +| `errorMode` | `"throw"` or `"warn"` | `"throw"` +| `varsReport` | `"strict"` or `"full"` or `false` | `"strict"` | `dev` | boolean | `false` | `immutable` | boolean | `false` | `hydratable` | boolean | `false` @@ -66,6 +68,8 @@ The following options can be passed to the compiler. None are required: | `name` | `"Component"` | `string` that sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope). It will normally be inferred from `filename`. | `format` | `"esm"` | If `"esm"`, creates a JavaScript module (with `import` and `export`). If `"cjs"`, creates a CommonJS module (with `require` and `module.exports`), which is useful in some server-side rendering situations or for testing. | `generate` | `"dom"` | If `"dom"`, Svelte emits a JavaScript class for mounting to the DOM. If `"ssr"`, Svelte emits an object with a `render` method suitable for server-side rendering. If `false`, no JavaScript or CSS is returned; just metadata. +| `errorMode` | `"throw"` | If `"throw"`, Svelte throws when a compilation error occured. If `"warn"`, Svelte will treat errors as warnings and add them to the warning report. +| `varsReport` | `"strict"` | If `"strict"`, Svelte returns a variables report with only variables that are not globals nor internals. If `"full"`, Svelte returns a variables report with all detected variables. If `false`, no variables report is returned. | `dev` | `false` | If `true`, causes extra code to be added to components that will perform runtime checks and provide debugging information during development. | `immutable` | `false` | If `true`, tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed. | `hydratable` | `false` | If `true` when generating DOM code, enables the `hydrate: true` runtime option, which allows a component to upgrade existing DOM rather than creating new DOM from scratch. When generating SSR code, this adds markers to `` elements so that hydration knows which to replace. @@ -224,16 +228,24 @@ Each `markup`, `script` or `style` function must return an object (or a Promise The `markup` function receives the entire component source text, along with the component's `filename` if it was specified in the third argument. -> Preprocessor functions may additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation. In current versions of Svelte it will be ignored, but future versions of Svelte may take account of preprocessor sourcemaps. +> Preprocessor functions should additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation. ```js const svelte = require('svelte/compiler'); +const MagicString = require('magic-string'); const { code } = await svelte.preprocess(source, { markup: ({ content, filename }) => { + const pos = content.indexOf('foo'); + if(pos < 0) { + return { code: content } + } + const s = new MagicString(content, { filename }) + s.overwrite(pos, pos + 3, 'bar', { storeName: true }) return { - code: content.replace(/foo/g, 'bar') - }; + code: s.toString(), + map: s.generateMap() + } } }, { filename: 'App.svelte' diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md new file mode 100644 index 0000000000..149603dcf9 --- /dev/null +++ b/site/content/docs/05-accessibility-warnings.md @@ -0,0 +1,258 @@ +--- +title: Accessibility warnings +--- + +Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application. + +Here is a list of accessibility checks Svelte will do for you. + +--- + +### `a11y-accesskey` + +Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used. + +```sv + +
+``` + +--- + +### `a11y-aria-attributes` + +Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props. + +```sv + + +``` + +--- + +### `a11y-autofocus` + +Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike. + +```sv + + +``` + +--- + +### `a11y-distracting-elements` + +Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided. + +The following elements are visually distracting: `` and ``. + +```sv + + +``` + +--- + +### `a11y-hidden` + +Certain DOM elements are useful for screen reader navigation and should not be hidden. + +```sv + + +``` + +--- + +### `a11y-img-redundant-alt` + +Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_. + +```sv +Foo eating a sandwich. + + + + + +Photo of foo being weird. + + +Image of me at a bar! + + +Picture of baz fixing a bug. +``` + +--- + +### `a11y-invalid-attribute` + +Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`. + +```sv + +invalid +``` + +--- + +### `a11y-label-has-associated-control` + +Enforce that a label tag has a text label and an associated control. + +There are two supported ways to associate a label with a control: + +- Wrapping a control in a label tag. +- Adding `for` to a label and assigning it the ID of an input on the page. + +```sv + + + + + + +``` + +--- + +### `a11y-media-has-caption` + +Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load). + +The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute. + +```sv + + + + + + + + + +``` + +--- + +### `a11y-misplaced-role` + +Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props. + +```sv + + +``` + +--- + +### `a11y-misplaced-scope` + +The scope attribute should only be used on `` elements. + +```sv + +
+``` + +--- + +### `a11y-missing-attribute` + +Enforce that attributes required for accessibility are present on an element. This includes the following checks: + +- `` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697)) +- `` should have alt, aria-label, or aria-labelledby +- `` should have lang +- `