ember-template-lint / ember-template-lint

Linter for Ember or Handlebars templates

ember-template-lint

ember-template-lint is a library that will lint your handlebars template and return error results.

For example, if the rule no-bare-strings is enabled, this template would be in violation:

{{! app/components/my-thing/template.hbs  }}
<div>A bare string</div>

When the ember-template-lint executable is run, we would have a single result indicating that the no-bare-strings rule found an error.

Requirements

• Node.js ^18.18.0 || ^20.9.0 || >=21.1.0

Installation

npm install --save-dev ember-template-lint

yarn add --dev ember-template-lint

Note: this library is installed by default with new Ember apps.

Usage

While ember-template-lint does have a Node API, the main way to use it is through its executable, which is intended to be installed locally within a project.

Basic usage is as straightforward as

ember-template-lint .

Workflow Examples

See documentation on workflow examples.

See documentation on the todo functionality.

Configuration

Project Wide

You can turn on specific rules by toggling them in a .template-lintrc.js file at the base of your project, or at a custom relative path which may be identified using the CLI:

module.exports = {
  extends: 'recommended',

  rules: {
    'no-bare-strings': true,
  },
};

For more detailed information see configuration.

Presets

	Name	Description
✅	recommended	Enables the recommended rules.
💅	stylistic	Enables stylistic rules for those who aren't ready to adopt ember-template-lint-plugin-prettier (including stylistic rules that were previously in the recommended preset in ember-template-lint v1).
⌨️	a11y	Enables A11Y rules. Its goal is to include all A11Y related rules, therefore it does not follow the same SemVer policy as the other presets. Please see versioning for more details.

Rules

Each rule has emojis denoting:

• what configuration it belongs to
• 🔧 if some problems reported by the rule are automatically fixable by the --fix command line option

Name	✅	💅	⌨️	🔧
attribute-indentation
attribute-order				🔧
block-indentation		💅		🔧
builtin-component-arguments	✅
deprecated-inline-view-helper	✅
deprecated-render-helper	✅
eol-last		💅		🔧
inline-link-to				🔧
linebreak-style		💅
link-href-attributes	✅		⌨️
link-rel-noopener	✅			🔧
modifier-name-case		💅		🔧
no-abstract-roles	✅		⌨️
no-accesskey-attribute	✅		⌨️	🔧
no-action	✅
no-action-modifiers
no-action-on-submit-button	✅
no-args-paths	✅
no-arguments-for-html-elements	✅
no-aria-hidden-body	✅		⌨️	🔧
no-aria-unsupported-elements	✅		⌨️
no-array-prototype-extensions	✅			🔧
no-at-ember-render-modifiers	✅
no-attrs-in-components	✅
no-autofocus-attribute	✅		⌨️
no-bare-strings
no-block-params-for-html-elements	✅
no-builtin-form-components	✅
no-capital-arguments	✅
no-class-bindings	✅
no-curly-component-invocation	✅			🔧
no-debugger	✅
no-duplicate-attributes	✅		⌨️	🔧
no-duplicate-id	✅		⌨️
no-duplicate-landmark-elements	✅		⌨️
no-dynamic-subexpression-invocations
no-element-event-actions
no-empty-headings	✅		⌨️
no-extra-mut-helper-argument	✅
no-forbidden-elements	✅
no-heading-inside-button	✅		⌨️
no-html-comments	✅			🔧
no-implicit-this	✅
no-index-component-invocation	✅
no-inline-styles	✅
no-input-block	✅
no-input-tagname	✅
no-invalid-aria-attributes	✅		⌨️
no-invalid-interactive	✅		⌨️
no-invalid-link-text	✅		⌨️
no-invalid-link-title	✅		⌨️
no-invalid-meta	✅		⌨️
no-invalid-role	✅		⌨️
no-link-to-positional-params	✅
no-link-to-tagname	✅
no-log	✅
no-model-argument-in-route-templates				🔧
no-multiple-empty-lines		💅		🔧
no-mut-helper
no-negated-condition	✅			🔧
no-nested-interactive	✅		⌨️
no-nested-landmark	✅		⌨️
no-nested-splattributes	✅
no-obscure-array-access	✅			🔧
no-obsolete-elements	✅		⌨️
no-outlet-outside-routes	✅
no-partial	✅
no-passed-in-event-handlers	✅
no-pointer-down-event-binding	✅		⌨️
no-positional-data-test-selectors	✅			🔧
no-positive-tabindex	✅		⌨️
no-potential-path-strings	✅
no-quoteless-attributes	✅			🔧
no-redundant-fn	✅			🔧
no-redundant-role	✅		⌨️	🔧
no-restricted-invocations
no-route-action	✅
no-scope-outside-table-headings	✅		⌨️
no-shadowed-elements	✅
no-this-in-template-only-components				🔧
no-trailing-spaces		💅		🔧
no-triple-curlies	✅
no-unbalanced-curlies	✅
no-unbound	✅
no-unknown-arguments-for-builtin-components	✅			🔧
no-unnecessary-component-helper	✅			🔧
no-unnecessary-concat		💅		🔧
no-unnecessary-curly-parens	✅			🔧
no-unnecessary-curly-strings	✅			🔧
no-unsupported-role-attributes	✅		⌨️	🔧
no-unused-block-params	✅
no-valueless-arguments	✅
no-whitespace-for-layout	✅		⌨️
no-whitespace-within-word	✅		⌨️
no-with	✅
no-yield-only	✅
no-yield-to-default	✅
quotes		💅		🔧
require-aria-activedescendant-tabindex	✅		⌨️
require-button-type	✅			🔧
require-context-role	✅		⌨️
require-each-key
require-form-method
require-has-block-helper	✅			🔧
require-iframe-title	✅		⌨️
require-input-label	✅		⌨️
require-lang-attribute	✅		⌨️
require-mandatory-role-attributes	✅		⌨️
require-media-caption	✅		⌨️
require-presentational-children	✅		⌨️
require-splattributes
require-valid-alt-text	✅		⌨️
require-valid-named-block-naming-format	✅			🔧
self-closing-void-elements		💅		🔧
simple-modifiers	✅
simple-unless	✅			🔧
splat-attributes-only	✅
style-concatenation	✅
table-groups	✅		⌨️
template-length

Supporting the --fix option

You can add a fixer to a rule. See fixer documentation for more details.

Sharing configs

It is possible to share a config (extends) or plugin (custom rules) across projects. See ember-template-lint-plugin-peopleconnect for an example.

Defining your own rules

You can define and use your own custom rules using the plugin system. See plugin documentation for more details.

Semantic Versioning Policy

The semver policy for this addon can be read here: semver policy.

Contributing

See the Contributing Guidelines for information on how to help out.

License

This project is licensed under the MIT License.

ember-template-lint's Issues

Describe JS API in README.

var TemplateLinter = require('ember-template-lint');

var linter = new TemplateLinter();
var template = fs.readFileSync('some/path/to/template.hbs', { encoding: 'utf8' });
var results = linter.verify(template);

results above will be an array of "result" objects, which have the following properties:

• rule - The name of the rule that triggered this warning/error.
• message - The message that should be output.
• line - The line on which the error occurred.
• column - The column on which the error occurred.
• moduleId - The module path for the file containing the error.
• source - The source that caused the error.
• fix - An object describing how to fix the error.

Option to skip Addon dependencies

One addon is offending with bare-strings, the error is caught during our main app build:

bare-strings: Non-translated string used (modules/ember-formly/templates/components/ember-formly-component-unknown @ L1:C5):
`Ember Formly: Unknown Component`
===== 1 Template Linting Error

Is there a way to skip linting addon dependencies?

All error messages should include rule id.

Given the following message:

frontend/templates/components/some-thing.hbs should pass TemplateLint.
Do not use <input> inside <button> (frontend/templates/components/some-thing @ L31:C14):
 `<input class="ajax_image" name="banner_file" type="file">

How would you know what rule ID needs to be researched or ignored?

Add ability for each rule to have `pending` list.

The idea here is the same as pending at the root level. When a project is passing all existing rules, but wants to implement a new rule it would be nice to allow only that one rule to be marked as pending for a given file. It should be straightforward to implement, but I am not 100% sure what the best API is for the .template-lintrc.js file.

A few options API wise would be:

• Allow listing pending in each rule's config. I am not a giant fan of this, as I would like the rule key to stay focused on configuring the actual rule.
• Add pendingByRule property that contains an object where the key's are the rule ID's and the values are an array of modules.
• Allow pending to be an object where the properties in the object are the rule ID's and the values are an array of pending files.
• Allow the pending array to include strings or objects. Objects would be formatted as { moduleId: 'some/path/here', rules: ['bare-strings', 'block-indentation'] }.

In all cases above update we need to update ember template-lint:print-failures to emit output that only marks specific failed rules for each failed file as pending.

Enable new rules in recommended config for 0.6.0.

New rules to enable by default:

• invalid-interactive
• img-alt-attributes
• style-concatenation
• deprecated-inline-view-helper
• link-rel-noopener

New rules needed before releasing:

• quotes (https://github.com/rwjblue/ember-template-lint/pull/42) (punting from 0.6.0 because there is no real progress at the moment, and I'd like to land these other new rules)

Rule: `tabindex` required on non-default-interactive elements made interactive with `role`.

@sarenji will provide more information.

Add documentation for `invalid-interactive` rule.

I just landed https://github.com/rwjblue/ember-template-lint/pull/66, but forgot to add info to the README for the new rule.

Rule: Disallow `{{unless}}`

Good:

{{#unless somePredicate}}
{{/unless}}

<div class="{{unless foo 'no-foo'}}"></div>

Bad:

{{#unless (and foo bar)}}
{{/unless}}

{{#unless foo}}
{{else}}
{{/unless}}

{{#if foo}}
{{else unless bar}}
{{/if}}

Mostly because it is impossible to reason about....

Usage of tabindex=-1 shouldn't be considered as interactive

The nested-interactive rule is triggered by a button inside a div with tabindex=-1. It shouldn't. We could remove the tabindex attribute, however Bootstrap uses this in all examples for modal dialogs.

Rule: {{actions}} on non-interactive elements must have a role attribute

Bad:

<div {{action "toggleModal"}}>Open the modal</div>
<span {{action "toggleModal"}}>Open the modal</span>

Good:

<div {{action "toggleModal"}} role="button">Open the modal</div>
<span {{action "toggleModal"}} role="button">Open the modal</span>

Bestest:

<button {{action "toggleModal"}}>Open the modal</button>
<button {{action "toggleModal"}}>Open the modal</button>

Anytime you're adding an interaction (an action) to a non-interaction HTML element you must specify an aria role. For this example you'd use the button role. This is so assistive technology can understand the element can be interacted with.

Add mechanism to disable rules inline within a given block.

The current implementation of <!-- template-lint disabled=true --> or <!-- template-lint bare-strings=false --> disables the rule for the entire "rest" of the template they are in. We should add a better control/configuration system so that it is possible to disable all or a single rule within a given block.

The principle behind this (i.e. how we think of it applying to the DOM tree) is that we're providing two ways of configuring the linter in a template:

1. Add an instruction as an in element comment (<div {{! template-lint) that applies to it and (optionally) to its descendants.
2. Add an instruction as a child-less node ({{! template-lint) that applies to all of its later siblings nodes and (mandatorily) to their descendants.

<div>
  {{! template-lint disabled=true }}
  {{! Things are disabled here }}
</div>
{{! But not disabled here }}

{{#foo-bar as |baz|}}
  {{! template-lint invalid-interactive=false }}
  {{! invalid-interactive is disabled here }}
{{/foo-bar}}
{{! invalid-interactive is reset to its original / global configuration here }}

<div>
  <div {{! template-lint rule='invalid-interactive' disabled=true}}>
    {{! invalid-interactive *not* disabled }}
  </div>
</div>

<div>
  <div {{! template-lint rule='invalid-interactive' disabled=true recursive=true}}>
    {{! invalid-interactive *is* disabled }}
  </div>
</div>

Original Proposal

Off the top of my head, I would like to add something like:

{{#template-lint disabled=true}}
  {{! Things are disabled here }}
{{/template-lint}}

{{! But not disabled here }}

These {{template-lint component invocations would be completely removed at build time (just like the HTML comments are today). This would also allow us to slowly phase out the current usage of HTML comments, which is somewhat odd anyways.

Here is an early mockup of what this might look like: http://rwjblue.jsbin.com/vayamom/edit?html,js,output

BasePlugin#sourceForNode() adds extra character to qouteless attributes

i know the related issues closed. but it seems it's not fully fixed. i mean, partly. because when attribute has quotes seems to work fine. only "quote less" attributes have issues

-    source: "alt=tomster"
+    source: "alt=tomster>"

Fix block-indentation when using whitespace control characters.

The following should be valid:

{{#if foo}}
  Blah
{{~/if}}

bare-string whitelist not working for email

I'm using ember-i18n but in a template I have an email like [email protected] that I don't translate:

...
<div>[email protected]</div>
...

If I use following .template-lintrc.js everything is fine, email is ignored and template linting passes

/* jshint node:true */
'use strict';

module.exports = {
  extends: 'recommended',
  rules: {
    'bare-strings': ['[email protected]']
  }
};

Using this configuration, however, I've to whitelist also all chars specified in the default configuration of the bare-string rule ('(', ')', ',', '.', '&', '+', '-', '=', '*', '/', '#', '%', '!', '?', ':', '[', ']', '{', '}') but elementAttributes and globalAttributes aren't used any more.

I've tried then with the following config

/* jshint node:true */
'use strict';

module.exports = {
  extends: 'recommended',
   rules: {
     'bare-strings': {
       whitelist: ['(', ')', ',', '.', '&', '+', '-', '=', '*', '/', '#', '%', '!', '?', ':', '[', ']', '{', '}', '[email protected]'],
       globalAttributes: ['title'],
       elementAttributes: { img: ['alt'], input: ['placeholder'] }
     }      
  }
};

but the rule reports [email protected] as not translated text. Also, I've a placeholder in a input textfield with bare string that is not reported.
In the second configuration, if I whitelist info@domain and com the rule works as expected (email is not reported)

There's something wrong with my configuration or a bug in the bare-string rule?
Thanks

Refactor to `traverse` API (from `this.syntax.Walker`).

This may not make sense for every rule, but I suspect that it will make detect methods much smaller/simpler.

Rule: img tags must have alt attributes

Hello! Please let me know if this is the way I should do it. If this issue is cool, I'll add more rule proposals.

Bad:

<img src="hello.jpg">
<img src="//cdn.verylongurl.com/1234/bucket/hello.jpg">

Good:

<img src="hello.jpg" alt="">
<img src="logo.jpg" alt="Your Website Name">
<img src="save-icon.jpg" alt="Save draft">
<img src={{userGeneratedUrl}} alt={{userGeneratedCaption}}>

Screen readers read images as text. Without alt attributes, screen readers fallback to reading the full src for an image out loud. With CDNs, that will get very annoying :-) To mitigate, always provide alt attributes for images. The value of the attribute should present the content and function of the image. Blank alt attributes are preferred if the image is purely presentational, but if it displays information (e.g. an image of text), transcribe the text; or if it's tied to functionality, write what it does as if it were a button. Ref: http://webaim.org/techniques/alttext/

Should not lint third-party code

I am getting the following warnings:

Self-closing a void element is redundant (modules/ember-cli-head/templates/components/head-layout.hbs @ L1:C0): `<meta name="ember-cli-head-start" />
Self-closing a void element is redundant (modules/ember-cli-head/templates/components/head-layout.hbs @ L1:C52): `<meta name="ember-cli-head-end" />

Which is obviously not my code and should not be linted. I'm not sure whether this applies only for the self-closing-void-elements rule or all of them. The funny thing is that ember-cli-head seems to be the only npm package that is linted (at least a test is created only for it). There is also a JSHint test for it:

ok 1 PhantomJS 2.1 - JSHint - modules/ember-cli-head/services/head-data.js: should pass jshint

And for no other third-party package. Any ideas?

Rule proposal: no-action-on-submit-button

{{! bad }}
<button {{action "cancel"}}>cancel</button>

{{! good }}
<button type="button" {{action "cancel"}}>cancel</button>

because there should be a submit action on <form> instead, to catch any submit event.
and if a <button> is not a submit button, there should be type="button"

Rule: Prevent using a `role` attribute value that matches the default semantic value of the element.

{{! bad }}

<button role="button">O_o</button>

{{! good }}
<div role="button"></div>

`no-bare-strings` doesn't seem to lint handlebars correctly

given the following rule

    'bare-strings':{
      whitelist: ['(', ')', ',', '.', '&', '+', '-', '=', '*', '/', '#', '%', '!', '?', ':', '[', ']', '{', '}'],
      globalAttributes: ['label', 'title'],
      elementAttributes: {
        input: [ 'placeholder' ],
        img: [ 'alt' ]
      }
    }

<div title="something">
<div label="something>

will throw an error similar to this

bare-strings: Non-translated string used in `title` attribute (hospitalrun/appointments/search/template @ L2:C32):`something`

I would like these rules to apply to handlebars as well

{{em-select class="col-sm-3" label="I AM SUCH A BARE STRING OMG" property="selectedAppointmentType" content=visitTypesWithEmpty}}

this should throw the same error, but it doesn't at the moment

Rule: Prevent non-phrasing content inside phrasing content elements.

Phrasing content elements include:

Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).

Spec: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2

Bad:

<p>
  <div></div>
</p>

<span><div></div></span>

considering using lodash as a dependecy

it can help us with the ease of creating rules and also with performance.
also _.chain method allows to create lazy streams so it's another big boost for performance.

of course it's not a must thing. but since it's not shipped to the browser. adding this library that can improved the code quality is a welcome addition from my side at least

Custom tag name

This package breaks when there is a a custom html tag with a dash inside and it should not as Ember angle bracket components will be introduced soon.

<foo-bar>
</foo-bar>

Cannot read property 'tag' of undefined

Rule: Once `role` is specified, enforce other required attributes.

There is a JSON object you can use for doing this here:
https://sourceforge.net/p/openajaxallianc/code/HEAD/tree/accessrules/version-2/trunk/openajax_a11y/wai_aria/aria.js

Disallow inline 'style' attribute in html or hbs

Im most projects, we recommend that using css to style the dom elements. But some ones may prefer to write inline style rules, because it's just quick! I would be wonderful if we have a rule that totally disallow inline style rules.

<div class="navbar" style="margin-bottom: 10px; border: 0;">
...
</div>

And it would be even more wonderful if we can add inline directive comment to disable a rule for some rare reasons. I'm not sure if currently we support that.

{{!-- template-lint bare-strings:false --}}

Not working with tildes

{{~#if foo~}}
  <a href="#">...</a>
{{~else if bar~}}
  <a href="#">...</a>
{{~else if baz~}}
  <a href="#">...</a>
{{~else~}}
  <a href="#">...</a>
{{~/if~}}

block-indentation: Incorrect indentation for `<a>` beginning at L3:C17. Expected `<a>` to be at an indentation of 2 but was found at 17. (app/pods/components/auto-link/template @ L3:C17)

Indentation for empty elements

For elements with a lot of attributes, I like to put them on their own line:

<div
  id="my-button"
  class="button"
  style={{escape "border: 1px solid red"}}
  onclick={{action 'foo'}}
  onmouseover={{action 'bar'}}
  onmouseout={{action 'baz'}}
  tabindex=0
  title="the title"></div>

With the above example, I get:
Expected '</div>' to be at an indentation of 0 but was found at 20

I can't suppress the linting error by doing this:

<div
  ...
  class="button">
  {{~how to suck up whitespace?~}}
</div>

nested-interactive incorrectly triggering when using `role="dialog"`

The following code triggers the nested-interactive rule:

<div role="dialog">
  <button>foo</button>
</div>

This is a common pattern when using modal dialogs.

Support additional whitelist characters along with defaults

Current behavior is to provide a whitelist array that replaces the defaults. If a user wants additional characters, they have to copy/paste the default array and add to it.

It would be better to provide a way for merging the defaults with a user provided whitelist.

@rwjblue suggested:

basically whitelist and additionalWhitelist or something

Textareas display whitespace from block indentation

Since textareas are block elements, the linter will instruct the closing tag to match the indentation of the opening tag.

e.g. to change

<textarea></textarea>

to

<textarea>
</textarea>

When this rule is obeyed the textarea will include the added whitespace in the input box.

This took a while to debug :-)

Heres the rule message:

block-indentation: Incorrect indentation for `textarea` beginning at L31:C6. Expected `</textarea>` ending at L36:C88 to be at an indentation of 6 but was found at 77.(live-ops/templates/components/new-last-minute-job-form @ L36:C88): 

`<textarea class="form-control"
                id="job-instructions"
                rows="3"
                placeholder="Do it well"
                value={{job.instructions}}
                oninput={{action 'updateInstructions' value='target.value'}}></textarea>`

Any ideas for a potential fix? In the mean time I'll disable the rule.

Rule: Require `rel="noopener"` for any `<a target="_blank"></a>`.

TL;DR If window.opener is set, a page can trigger a navigation in the opener regardless of security origin. See https://bugs.chromium.org/p/chromium/issues/detail?id=168988 for some background.

General info about noopener:

• https://html.spec.whatwg.org/multipage/semantics.html#link-type-noopener
• https://mathiasbynens.github.io/rel-noopener/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
• https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/

Release Request

Would it be possible to cut a build to include the recent PRs?

Thanks in advance! 😃

Raw blocks report incorrect identation

Raw blocks seem to get incorrect indentation calculation which causes false positives.

The following template:

{{{{if isMorning}}}}
  Good Morning
{{{{/if}}}}

Gives the following error message:

Incorrect indentation for `if` beginning at L1:C0. Expected `{{/if}}` ending at L3:C11 to be at an indentation of 0 but was found at 4."

Rule: Enforce multiline component/helper invocation alignment.

Force alignment of all attrs are to be X spaces from the start of the component/helper invocation and as |foo|}} on final line outdented to the original {{ indentation.

{{! good }}

{{foo-bar 
  baz="bat"
  derp="qux"
}}

{{#foo-bar 
  baz="bat"
  derp="qux"
as |foo|}}
  stuff here
{{/foo-bar}}

{{! bad }}

{{foo-bar baz="bat"
  derp="qux"
}}

{{foo-bar 
baz="bat"
derp="qux"
}}

{{foo-bar 
  baz="bat"
  derp="qux"}}

run linter from command line

Is there a way to run linter form the command line?

Invalid interactive detected on parent nodes

Currently the invalid-interactive rule is triggered when a non-interactive element has a child with an interaction - regardless of whether the child is an interactive element. E.g.

<li>
  <button {{action 'foo'}}>
</li>

I have a fix incoming.

Expose range of lines and columns for errors

Currently the line and column properties of the result refers to the first line and column of the error. In order to do 'nice' tooling in editors, the end line and column should be returned as well. This allows editors to highlight the error in a nicer way.

Examples:

<div>bare string</div>

start:
  line: 0
  column: 5
end:
  line: 0
  column: 15

---

<div>
  multi line
  bare string
</div>

start:
  line: 1
  column: 2
end:
  line: 2
  column: 12

Rule: Disallow `{{yield}}` only templates.

Prevent {{yield}} only templates. They are not required, and only increase the total template payload size...

invalid-interactive should only be triggered for some event types?

My use case is I render some un-editable HTML and identify a range of it that I think the user wants to extract. They can click a "modify" button, and then I want them to be able to drag-select a new range, and while it's still selected, interact with a few controls in a panel off to the side. So I want to attach a mousedown handler to the panel (a div) containing the controls so that any interactions with that panel will not clear the browser selection. However, this triggers the invalid-interactive rule.

If this seems like to much of an edge case, I'm happy to just disable the rule in my template. But I'm curious what folks' thoughts are -- is there something to do about this?

It also occurs to me that people might want to handle mouseover, mouseleave, mousemove, etc. on non-interactive elements

So, the options that I see are one or both (or neither) of:

• Globally change the behavior so only handlers for certain types of events trigger this rule
• Allow the configuration to specify which types of events trigger this rule

If one or both of these sound good, I'm happy to put together a pull request. Thoughts?

invalid-interactive rule should check callback attributes

{{! bad }}

<div onclick={{something}}></div>

Fix README.

It still contains all of the stuff from ember-cli-template-lint. Some of it still applies, but some doesn't.

img-alt-attributes: Do not require `alt` if `aria-hidden="true"`

Update rule to avoid flagging an issue for:

<img src="asdf.jpg" aria-hidden="true">

No inline {{link-to}}

I'm not sure we can actually detect this anymore because of the behind-the-scenes transformation, but:

Good:

{{#link-to "foo"}}Foo{{/link-to}}

Bad:

{{link-to "Foo" "foo"}}

<iframe> inside {{#if}} triggers erroneous block-indentation

The following triggers block-indentation: Incorrect indentation for 'if'. Expected{{/if}}ending to be at an indentation of 0 but was found at 4 but it should not:

{{#if isIframe}}
  <iframe src="{{url}}"></iframe>
{{else if isDoc}}
  Download
{{/if}}

invalid-interactive additionalInteractiveTags not working?

I have this:

<form {{action 'foo' on="submit"}}>

and its failing the invalid-interactive check. We don't have buttons in the form, but we want to be able to submit the form with the enter key for accessibility. It seems like it should be okay for forms to submit actions...

I still think its odd to default forms to fail this check. I'm trying to change this behavior with this rule and it doesn't seem to be working:

    'invalid-interactive': {additionalInteractiveTags:['form']},

when looking at 'lint-invalid-interactive.js' it doesn't appear to be using additionalInteractiveTags like 'lint-nested-interactive.js' is...

Escaped curlies cause incorrect indentation error

The following template:

<div>
  \{{example}}
</div>

causes the following error:

block-indentation: Incorrect indentation for `{{example}}
` beginning at L2:C3. Expected `{{example}}
` to be at an indentation of 2 but was found at 0.(dummy/pods/examples/computed-properties/any/template @ L2:C3): 
`<div>
  \{{example}}
</div>`

It seems like the indentation calculation is thrown off by the line starting with the sequence \{{.

Add `ignore` to config.

To allow completely ignoring certain files. This would go at the same level as pending, and prevent a given file from even being parsed.

Make sure we identify all interactive `role`s.

`is-interactive-element` must include `<label>`

We will then need to update the nested-interactive to specially process when <label> is the parent interactive element.

{{! good }}

<label>
  <input>
</label>

<label for="foo">
  <div id="foo" tabindex=-1></div>
</label>

{{! okay}}
<label>
  <div tabindex="-1"></div>
  <input>
</label>

{{! bad }}
<label>
  <input>
  <input>
</label>

<label for="foo">
  <div id="foo" tabindex=-1></div>
  <input>
</label>

Add `style-concatenation` to recommended rules.

Add new recommended rules is a breaking change, so this needs to be done before 0.6.0.