diff --git a/guides/release/code-editors/index.md b/guides/release/code-editors/index.md index 054761999a..327e367192 100644 --- a/guides/release/code-editors/index.md +++ b/guides/release/code-editors/index.md @@ -102,22 +102,6 @@ Shortcuts to navigate related files with Ember.js projects. [Ember Tools](https://github.com/AndrewRadev/ember_tools.vim) - Various tools for working with Ember.js projects. -## Atom - -Atom is hackable text editor for the 21st Century. - -[atom-ide-ember](https://github.com/josa42/atom-ide-ember) - -Atom package to use the Ember Language Server. - -[emberjs-atom](https://atom.io/packages/emberjs-atom) - -Atom autocomplete and snippets for Ember.js. - -[atom-ember-snippets](https://github.com/mattmcmanus/atom-ember-snippets) - -Ember.js ES6, EmberData & Handlebars snippets for Atom editor. - -[language-ember-htmlbars](https://atom.io/packages/language-ember-htmlbars) - -Add Ember template syntax highlighting and indentation to Atom - ## Sublime Text A sophisticated text editor for code, markup and prose. @@ -127,9 +111,3 @@ Ember CLI snippets for Sublime Text 3. [ember-component-template-split-view](https://github.com/mmitchellgarcia/ember-component-template-split-view) - Super simple Sublime Text plugin that will let you open corresponding template or route files with Ember.js components. - -## CodeLobster IDE - -CodeLobster IDE is a smart free cross-platform editor. - -[CodeLobster IDE plug-in for Ember](http://www.codelobster.com/emberjs.html) gives autocomplete and tooltips for Ember.js functions, context and dynamic help. diff --git a/guides/release/routing/controllers.md b/guides/release/routing/controllers.md index d26298b78a..148762ff24 100644 --- a/guides/release/routing/controllers.md +++ b/guides/release/routing/controllers.md @@ -1,6 +1,6 @@ ### What is a Controller? -A [Controller](https://api.emberjs.com/ember/release/classes/Ember.Controller) is routable object which receives a single property from the Route – `model` – which is the return value of the Route's [`model()`](https://api.emberjs.com/ember/release/classes/Route/methods/model?anchor=model) method. +A [Controller](https://api.emberjs.com/ember/release/classes/Ember.Controller) is a routable object which receives a single property from the Route – `model` – which is the return value of the Route's [`model()`](https://api.emberjs.com/ember/release/classes/Route/methods/model?anchor=model) method. The model is passed from the Route to the Controller by default using the [`setupController()`](https://api.emberjs.com/ember/release/classes/Route/methods/setupController?anchor=setupController) function. The Controller is then often used to decorate the model with display properties such as retrieving the full name from a name model. diff --git a/guides/v6.5.0/accessibility/application-considerations.md b/guides/v6.5.0/accessibility/application-considerations.md new file mode 100644 index 0000000000..95b487211c --- /dev/null +++ b/guides/v6.5.0/accessibility/application-considerations.md @@ -0,0 +1,58 @@ +In this section, you will learn about the configurations and libraries that affect an entire application's accessibility. + +## Lang Attribute + +Declaring the language of the HTML document allows users to better understand your content. + +> Both assistive technologies and conventional user agents can render text more accurately when the language of the Web page is identified. Screen readers can load the correct pronunciation rules. Visual browsers can display characters and scripts correctly. Media players can show captions correctly. As a result, users with disabilities will be better able to understand the content. +> [WCAG Success Criterion 3.1.1: Intent](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html#intent) + +A primary language should be defined on the `` element's `lang` attribute. For new apps, you can use the `--lang` option on the `ember new` command to set the language for a new application. + +```bash +ember new mon-app --lang fr +``` + +This command will create your application with French defined as the primary language +on the `` element's `lang` attribute. + +For existing Ember apps, a developer may edit the `index.html` file or leverage [ember-intl](https://github.com/ember-intl/ember-intl). + +The `html` element may not have multiple `lang` _values_. If an element contains content in a language different from the primary, then you can provide the element its own `lang` attribute. + +![For example, the HTML tag may have a lang of "es" while a paragraph may have a lang of "en"](/images/accessibility/application-considerations/lang.png) + +
+
+
+
Zoey says...
+
+

+ To learn more about the lang attribute and how to use it: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang. Unsure which language subtag to use? Try the Language Subtag Lookup tool. +

+
+
+ +
+
+ +## Accessibility addons + +Any addon that will provide UI elements to the application should be evaluated for accessibility before use. + +There are some existing Ember addons that may help you make your app more accessible. Each addon should be evaluated for its own usefulness and merit- you may find in some instances, that it would be better to implement the ideas presented in the addon in your own application. + +Here are some examples of accessibility-focused addons created by many people throughout the Ember community: + +- [ember-a11y-landmarks](https://github.com/ember-a11y/ember-a11y-landmarks) - Ember addon to help with landmark roles for better accessibility +- [ember-component-focus](https://github.com/ember-a11y/ember-component-focus) - A mixin for adding methods to your Ember components that help you manage the currently focused element. +- [ember-steps](https://github.com/rwjblue/ember-steps) - Declarative create wizards, tabbed UIs, and more +- [ember-page-title](https://github.com/tim-evans/ember-page-title) - Page title management for Ember.js Apps +- [ember-self-focused](https://github.com/linkedin/self-focused/tree/master/packages/ember-self-focused) - Focus on route on transition +- [ember-keyboard](https://github.com/patience-tema-baron/ember-keyboard) - An Ember.js addon for the painless support of keyboard events +- [ember-a11y-testing](https://github.com/ember-a11y/ember-a11y-testing) - A suite of accessibility tests that can be run within the Ember testing framework +- [a11y-announcer](https://github.com/ember-a11y/a11y-announcer) - An accessible ember route change announcer +- [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint) - linter for Ember templates + ![Template Linting Preview](/images/accessibility/application-considerations/template-lint.png) + +While there are quite a few moving parts, here's a cheat sheet to get you started: [Accessibility Cheat Sheet](https://moritzgiessmann.de/accessibility-cheatsheet/) diff --git a/guides/v6.5.0/accessibility/components.md b/guides/v6.5.0/accessibility/components.md new file mode 100644 index 0000000000..6e0e2a99d2 --- /dev/null +++ b/guides/v6.5.0/accessibility/components.md @@ -0,0 +1,93 @@ +When crafting an accessible component, the first and most important thing is that the component should render valid HTML. + +Both the HTML and ARIA specifications have been written in a way that make them work together. Semantic HTML provides the necessary _context_ to screen readers. + +Browsers have implemented the spec in a way that provides functionality for free. +For example, consider this code sample: + +```html + +``` + +Here is what would be provided by the browser that the developer would otherwise need to provide: + +- keyboard interactions on interactive elements (i.e., using the `ENTER` key to activate a ` + + <:content> + This is what is shown when I'm opened! + + +``` + +We know the state of the popover because we passed it as an argument to the `yield`. To access its value, use the block parameters at the named block scope. It will not be accessible at the `Popover` level, so if you want the value to be available for all the blocks, you will have to pass it for each of them. + +Rendering the previous code example would give this as result: + +```html + +
+
+ +
+
+ This is what is showed when I'm opened! +
+
+``` + +Don't worry, you can also still use `yield` by itself, and mix it with named blocks. Let’s take a card example: + +```handlebars {data-filename=app/components/card.hbs} +
+ {{#if (has-block "title")}} +
+ {{yield to="title"}} +
+ {{/if}} +
+ {{yield}} +
+
+``` + +A yielded block without a name is called `default`. So to access it, it’s like any other named blocks. + +```handlebars + + <:title> +

It's nice to have me. Sometimes

+ + <:default> + The card content will appear here! + + +``` + +The title being optional when you create a card, you can use the `(has-block)` helper with the named block by adding its name as a first parameter. That means you could also create this card: + +```handlebars + + I don't want any title, and I only have a default content! + +``` + +As you are not using named blocks, you can simply yield the content you would like to add, which becomes the default yield block. + + + + diff --git a/guides/v6.5.0/components/block-params.md b/guides/v6.5.0/components/block-params.md new file mode 100644 index 0000000000..db3eb8a161 --- /dev/null +++ b/guides/v6.5.0/components/block-params.md @@ -0,0 +1,3 @@ +--- +redirect: components/block-content +--- diff --git a/guides/v6.5.0/components/built-in-components.md b/guides/v6.5.0/components/built-in-components.md new file mode 100644 index 0000000000..7f79635e4b --- /dev/null +++ b/guides/v6.5.0/components/built-in-components.md @@ -0,0 +1,220 @@ +Out of the box, Ember provides 2 components for building a form: + +* [``](https://api.emberjs.com/ember/6.5.0/classes/Ember.Templates.components/methods/Input?anchor=Input) +* [`