Skip to content
0:00 / 0:00

#ember.js#ember-template-lint#accessibility

May I Ask a Question - Season 2 - Episode 3

May I ask a Question

53 subscribers • 1 video on Hallway

YouTube
  • Recommended by 1 person: 1 on Stack Overflow and its sister sites.
  • Presented by Chris Manson and Jen Weber
  • May be out of date. The tools, versions or practices it shows have likely moved on.

Intermediate. Assumes working knowledge.

48 views7 years ago1 recommendation

Web developmentTools and practiceAccessibilityVue, Svelte, Angular and othersTesting

Chris Manson and Jen Weber investigate the no-invalid-interactive warning in ember-template-lint and debug an ember-bootstrap form issue.

This week we answered a question about accessibility to mark Global Accessibility Awareness Day. We went into a deep-dive to see what the ember-template-lint warning "no-invalid-interactive" means for your code and for accessibility in general stackoverflow.com/a/56187484/690826 We then attempted to recreate an issue that someone was having with ember-bootstrap form element. Check out the video to see how that ended up! stackoverflow.com/a/56219734/690826 You can follow Chris on Twitch if you want to get notified of the next live stream twitch.tv/real_ate. You can also follow Jen on Twitter at twitter.com/jwwweber and Chris at twitter.com/real_ate to be notified of the next stream 🎉

Why it's here

1 person recommends this

What people say. Recommended for explaining how to resolve the no-invalid-interactive warning in Ember templates.

handlebearson Stack Overflow • Recommends

On “How to fix warning "interaction added to non-interactive element no-invalid-interactive"”

The solution here depends on what the action should do. Refactoring an action that triggers a transition Since this action takes the user to a new route, it should be a link element, <a> and not a button. This gives assistive technology/screen reader users a clue that interacting will take them somewhere new in the app. This can be refactored to a link-to in Ember, which will wrap the content in <a> : {{#link-to someRoute}} <div> more content </div> {{/link-to}} someRoute could be a computed property if it needs to be informed by multiple pieces of data. Otherwise, it could be a string. Refactoring an interaction that keeps you on the same page In cases where the action doe…