Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ember-page-title to app default blueprint #645

Merged
merged 11 commits into from
Oct 16, 2020
Merged

Add ember-page-title to app default blueprint #645

Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
30a29c2
first draft for RFC to add ember-page-title in app blueprint
KamiKillertO Jun 25, 2020
307deae
Use bracket invocation
KamiKillertO Jun 25, 2020
677af23
Apply suggestions from code review
KamiKillertO Jul 3, 2020
d79f323
Add link to route template blueprint file
KamiKillertO Jun 26, 2020
9809bb1
Apply suggestions from code review
KamiKillertO Jul 3, 2020
03b0740
Update text/0000-add-ember-page-title-addon.md
KamiKillertO Jul 17, 2020
8b34c3f
Update "How we teach this" section
KamiKillertO Sep 17, 2020
779fd0b
Explain why ember-page-title and not another addon
KamiKillertO Sep 25, 2020
7a01aec
Add that the addon will have to be maintained in the drawback section
KamiKillertO Sep 25, 2020
fbbb9fd
Remove references to `<HeadLayout/>`
KamiKillertO Oct 6, 2020
ed1e25d
Fix typo
KamiKillertO Oct 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions text/0000-add-ember-page-title-addon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
- Start Date: 2020-06-24
- Relevant Team(s): Ember CLI
- RFC PR: (after opening the RFC PR, update this with a link to it and update the file name)
- Tracking: (leave this empty)
- Authors: Benjamin Jegard, Melanie Sumner, Ricardo Mendes

# Add ember-page-title to the app blueprint

## Summary

Add [`ember-page-title`](https://github.com/adopted-ember-addons/ember-page-title) to the default blueprint for new Ember apps as a way to provide improved out-of-the-box (OOB) accessibility for Ember applications.
KamiKillertO marked this conversation as resolved.
Show resolved Hide resolved
KamiKillertO marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

@NullVoxPopuli NullVoxPopuli Jul 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does the addon maintain a history of the titles?

Like, if I were to do a bunch of navigations where some, but not all page-title invocations have replace=true, does the title always reflect what is rendered?

Does that mean that the page title is dependent on render order?

What happens if I do?

{{#each this.breadcrumbs |breadcrumb|}}
  {{page-title breadcrumb.name}}
{{/each}}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure, I'll make a dummy app to test ^^

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add nested route + breadcrumbs test case to ember-page-title and we'll find out.


## Motivation

This RFC is part of the work made by the Ember.js Accessibility Strike Team to ensure that newly created ember apps have no accessibility issues.

Users with assistive technology rely on the page title to know if they are on the correct page of a website.
Adding this addon will provide developers a simple solution to achieve the [WCAG Success Criterion 2.4.2: Page Titled](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)

## Detailed design

1. Make [`ember-page-title`](https://github.com/adopted-ember-addons/ember-page-title) an official Ember addon by transferring `ember-page-title` repo to the [Ember CLI org](https://github.com/ember-cli) (it's currently in the [Adopted Ember Addons org](https://github.com/adopted-ember-addons))
2. Add the dependency to the app blueprint here: https://github.com/ember-cli/ember-cli/blob/master/blueprints/app/files/package.json#L19
3. Update app blueprint to include `<HeadLayout />` at the top of [application.hbs](https://github.com/ember-cli/ember-cli/blob/master/blueprints/app/files/app/templates/application.hbs)
KamiKillertO marked this conversation as resolved.
Show resolved Hide resolved
4. Update route blueprint to include `{{page-title RouteName}}` at the top of the route [template.hbs](https://github.com/emberjs/ember.js/blob/master/blueprints/route/native-files/__root__/__templatepath__/__templatename__.hbs) (this [template.hbs](https://github.com/emberjs/ember.js/blob/master/blueprints/route/files/__root__/__templatepath__/__templatename__.hbs) too) where `RouteName` is the name of the route provided to the `ember generate route` command

## How we teach this

- Update the "Page Title" section in [Page Template Considerations](https://guides.emberjs.com/release/accessibility/page-template-considerations) to use `ember-page-title`.
- Update code examples in [Building Pages](https://guides.emberjs.com/release/tutorial/part-1/building-pages/) to include uses of `{{page-title}}`. Also explain that updating the page title with the current page name will help users with assistive technology locate themself on the website.
KamiKillertO marked this conversation as resolved.
Show resolved Hide resolved

## Drawbacks

- An additional dependency to new projects. But, no noticeable size differences it's only all +10kb of js for production builds (not gzipped, ~2kb js gzipped)
- Add an extra helper `{{page-tile}}` and a new component `<HeadLayout />` (possible name clashing)
KamiKillertO marked this conversation as resolved.
Show resolved Hide resolved
KamiKillertO marked this conversation as resolved.
Show resolved Hide resolved

## Alternatives

N/A

## Unresolved questions

None

## References

- [WCAG Success Criterion 2.4.2: Page Titled](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html)