step-15 Accessibility #341

felixzapata · 2016-05-28T18:04:38Z

Add ngAria module.
Add labels to the search and order fields.
Add accessibility plugin for Protractor.
- Add missing alt attributes in the phone detail.
Add aria live regions to inform the user about results after searching and filtering elements.
Improve access via keyboard:
Navigate between the images in a phone detail.
Add headings elements.
Add information about checkmarks in the phone detail specs.

By the way, do I have to modify the document in the full tutorial?

felixzapata · 2016-05-30T07:05:03Z

hi @gkalpak, ¿is there any way that the use of the debounce option for the ng-model works with Protractor? I need this option for my changes. But with that, the e2e tests fail.

I know that there is an issue about that but nothing more.

gkalpak · 2016-05-30T12:12:42Z

Without having really looked into that, I can't imagine how protractor can be ignoring the debounce. It's something that Angular does and PRotractor doesn't have a way to "ignore" it.

What is probably happening, is that Protractor waits for the view to "stabilize" (which in Angular terms includes waiting for registered timeouts, such as the one used by debounce) and only then assets your expectation.

If you want to circumvent that, you can turn on ignoreSynchronization (read more about it here).

If you can't get it to work, post the failing test and I'll take a look.

felixzapata · 2016-05-30T12:28:01Z

I think that with ignoreSynchronization does not work. I saw yesterday this information about timeouts. One of the test that fails is:

    it('should filter the phone list as a user types into the search box', function() {
      var phoneList = element.all(by.repeater('phone in $ctrl.phones'));
      var query = element(by.model('$ctrl.query'));

      expect(phoneList.count()).toBe(20);

      query.sendKeys('nexus');
      expect(phoneList.count()).toBe(1);

      query.clear();
      query.sendKeys('motorola');
      expect(phoneList.count()).toBe(8);
    });

The problem is the expect runs before the debounce finishes, so the results never will be the correct. It Is the same example that an user reported in the Protractor issue that I mentioned before.

I have tried using wait and setTimeout but I obtain the same errors.

felixzapata · 2016-05-31T07:07:49Z

@gkalpak After a review, I think that my problem is related with some changes I've made in the repeater. I will check it.

felixzapata · 2016-05-31T07:26:23Z

@gkalpak done. Now the e2e tests pass in my local environment. I've added an browser.sleep suggested by @mohitjee15 and I've changed how to obtain the repeater in the scenario due to my changes in the template.

But here, Travis throws an error WebDriverError: unknown error: Chrome version must be >= 46.0.2490.0

gkalpak · 2016-05-31T08:56:32Z

Thx 👍
I will take a look this week !

felixzapata · 2016-05-31T09:01:34Z

ok @gkalpak. Do I have to modify the full tutorial and send another pull request or I have to wait until this pull request is accepted?

gkalpak · 2016-05-31T09:13:59Z

Yes, you have to update the tutorial context as well, so we can merge them together.

felixzapata · 2016-05-31T09:15:21Z

ok, I will work in the tutorial and I will send another pulll request as soon as possible.

gkalpak · 2016-06-03T18:46:04Z

@felixzapata, I'll review this together with the tutorial content PR - feel free to ping me when it's ready.
Thx for working on this 👍

felixzapata · 2016-06-15T09:05:06Z

@gkalpak I've created the pull request with the new step in the tutorial.

About this pull request, please feel free to comment if I need to review the code in the new directives due to some mistakes.

gkalpak · 2016-06-15T09:25:57Z

Awesome! I will take a look soon.

gkalpak · 2016-06-20T14:00:14Z

Note to self: We need a new tag for this step.

gkalpak · 2016-06-20T14:19:46Z

Why had the previous steps be modified? Since this is an extra step at the end, previous steps should not be touched as far as I understand. Do I miss something?

felixzapata · 2016-06-20T14:27:24Z

@gkalpak I will check again the pull request. I'm only want to upload three commits and I though that it was ok.

googlebot · 2016-06-20T14:27:32Z

We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm.

googlebot · 2016-06-20T14:31:53Z

CLAs look good, thanks!

felixzapata · 2016-06-20T14:33:09Z

@gkalpak done, a problem with the rebase

- Add the 'angular.js' script. - Add the `ngApp` directive to bootstrap the application. - Add a simple template with an expression.

- Add a stylesheet file ('app/app.css'). - Add a static list with two phones.

- Convert the static phone list to dynamic by: - Creating a `PhoneListController` controller. - Extracting the data from HTML into the controller as an in-memory dataset. - Converting the static document into a template with the use of the `ngRepeat` directive. - Add a simple unit test for the `PhoneListController` controller to show how to write tests and run them using Karma (see README.md for instructions).

- Introduce components. - Combine the controller and the template into a reusable, isolated `phoneList` component. - Refactor the application and tests to use the `phoneList` component.

- Refactor the layout of files and directories, applying best practices and techniques that will make the application easier to maintain and expand in the future: - Put each entity in its own file. - Organize code by feature area (instead of by function). - Split code into modules that other modules can depend on. - Use external templates in `.html` files (instead of inline HTML strings).

- Add a search box to demonstrate: - How the data-binding works on input fields. - How to use the `filter` filter. - How `ngRepeat` automatically shrinks and grows the number of phones in the view. - Add an end-to-end test to: - Show how end-to-end tests are written and used. - Prove that the search box and the repeater are correctly wired together.

- Add an `age` property to the phone model. - Add a drop-down menu to control the phone list order. - Override the default order value in controller. - Add unit and end-to-end tests for this feature. Closes angular#213

- Replace the in-memory dataset with data loaded from the server (in the form of a static 'phone.json' file to keep the tutorial backend agnostic): - The JSON data is loaded using the `$http` service. - Demonstrate the use of `services` and `dependency injection` (DI): - `$http` is injected into the controller through DI. - Introduce DI annotation methods: `.$inject` and inline array Closes angular#207

- Add a phone image and links to phone pages. - Add an end-to-end test that verifies the phone links. - Tweak the CSS to style the page just a notch.

- Introduce the `$route` service, which allows binding URLs to views for routing and deep-linking: - Add the `ngRoute` module as a dependency. - Configure routes for the application. - Use the `ngView` directive in 'index.html'. - Create a phone list route (`/phones`): - Map `/phones` to the existing `phoneList` component. - Create a phone detail route (`/phones/:phoneId`): - Map `/phones/:phoneId` to a new `phoneDetail` component. - Create a dummy `phoneDetail` component, which displays the selected phone ID. - Pass the `phoneId` parameter to the component's controller via `$routeParams`.

- Implement fetching data for the selected phone and rendering to the view: - Use `$http` in `PhoneDetailController` to fetch the phone details from a JSON file. - Create the template for the detail view. - Add CSS styles to make the phone detail page look "pretty-ish".

- Implement a custom `checkmark` filter. - Update the `phoneDetail` template to use the `checkmark` filter. - Add a unit test for the `checkmark` filter.

- Make the thumbnail images in the phone detail view clickable: - Introduce a `mainImageUrl` property on `PhoneDetailController`. - Implement the `setImage()` method for changing the main image. - Use `ngClick` on the thumbnails to register a handler that changes the main image. - Add an end-to-end test for this feature.

- Replace `$http` with `$resource`. - Create a custom `Phone` service that represents the RESTful client. - Use a custom Jasmine equality tester in unit tests to ignore irrelevant properties.

- Add animations to the application: - Animate changes to the phone list, adding, removing and reordering phones with `ngRepeat`. - Animate view transitions with `ngView`. - Animate changes to the main phone image in the phone detail view. - Showcase three different kinds of animations: - CSS transition animations. - CSS keyframe animations. - JavaScript-based animations.

gkalpak

I started reviewing this today, but something seems to have gone wrong (with rebasing maybe). Some unrelated changes or changes from other steps appear as part of the PR, which makes it very difficult to review.

@felixzapata, can you please rebase this on top of the current master and clean it up (e.g. merge all commits into one)?

gkalpak · 2016-12-13T13:41:35Z

package.json

-    "protractor": "^3.2.2"
+    "protractor": "^3.2.2",
+    "protractor-accessibility-plugin": "^0.1.1",
+    "shelljs": "^0.6.0"


Is this necessary? It doesn't seem to be used.

gkalpak · 2016-12-13T13:47:05Z

README.md

+
+### step-15 _Accessibility (a11y)_
+
+- Add ngAria module.


Didn't you end up removing it in the end? (Although it does seem strange to have a chapter about ARIA that doesn't mention or need ngAria 😃)

Yes, finally I removed the module so I will update the README file.

felixzapata · 2016-12-13T14:53:52Z

@gkalpak I´ve updated the PR to avoid the multiple commits.

I will take a look to your comments.

felixzapata · 2016-12-13T15:08:03Z

@gkalpak I will update the PR with only one single commit.

felixzapata · 2016-12-14T07:46:28Z

@gkalpak is there a problem inside Travis with the driver for Chrome?

gkalpak · 2016-12-14T08:23:31Z

Not sure, but if the tests pass locally, don't worry about Travis. I'll deal with it later.

felixzapata mentioned this pull request Jun 15, 2016

docs(step_15): create new step about accessibility angular/angular.js#14779

Open

3 tasks

gkalpak force-pushed the master branch from b278344 to ffff03d Compare June 17, 2016 19:26

felixzapata force-pushed the a11y branch from b55c0b7 to c3b9869 Compare June 20, 2016 14:31

googlebot added the cla: yes label Jun 21, 2016

gkalpak force-pushed the master branch from ffff03d to 6b92789 Compare July 5, 2016 07:28

petebacondarwin force-pushed the master branch 3 times, most recently from d4f5c93 to 2ccda1d Compare July 7, 2016 13:03

gkalpak force-pushed the master branch from 2ccda1d to e6e6367 Compare October 18, 2016 11:52

IgorMinar and others added 3 commits November 21, 2016 12:34

step-0 Bootstrapping

b160462

- Add the 'angular.js' script. - Add the `ngApp` directive to bootstrap the application. - Add a simple template with an expression.

step-1 Static Template

30fd06f

- Add a stylesheet file ('app/app.css'). - Add a static list with two phones.

gkalpak and others added 12 commits November 21, 2016 12:34

step-3 Components

c1ca5d0

- Introduce components. - Combine the controller and the template into a reusable, isolated `phoneList` component. - Refactor the application and tests to use the `phoneList` component.

step-6 Two-way Data Binding

7e60b73

- Add an `age` property to the phone model. - Add a drop-down menu to control the phone list order. - Override the default order value in controller. - Add unit and end-to-end tests for this feature. Closes angular#213

step-8 Templating Links & Images

baf5a9b

- Add a phone image and links to phone pages. - Add an end-to-end test that verifies the phone links. - Tweak the CSS to style the page just a notch.

step-11 Custom Filters

aeefb7c

- Implement a custom `checkmark` filter. - Update the `phoneDetail` template to use the `checkmark` filter. - Add a unit test for the `checkmark` filter.

step-13 REST and Custom Services

7122fc7

- Replace `$http` with `$resource`. - Create a custom `Phone` service that represents the RESTful client. - Use a custom Jasmine equality tester in unit tests to ignore irrelevant properties.

gkalpak force-pushed the master branch from 9dc4669 to 0970e05 Compare November 21, 2016 10:35

gkalpak suggested changes Dec 13, 2016

View reviewed changes

felixzapata force-pushed the a11y branch from 9a8576e to 1bcc945 Compare December 13, 2016 14:50

felixzapata force-pushed the a11y branch from 9c66ee9 to 76bfe2a Compare December 13, 2016 15:14

feat(a11y): improve the accessibility of the project

76bfe2a

gkalpak force-pushed the master branch 4 times, most recently from 71fa5cb to c9eef47 Compare November 15, 2018 14:17

gkalpak force-pushed the master branch from c9eef47 to ef6f6eb Compare June 5, 2020 14:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

step-15 Accessibility #341

step-15 Accessibility #341

felixzapata commented May 28, 2016

felixzapata commented May 30, 2016

gkalpak commented May 30, 2016

felixzapata commented May 30, 2016

felixzapata commented May 31, 2016

felixzapata commented May 31, 2016 •

edited

Loading

gkalpak commented May 31, 2016

felixzapata commented May 31, 2016

gkalpak commented May 31, 2016

felixzapata commented May 31, 2016

gkalpak commented Jun 3, 2016

felixzapata commented Jun 15, 2016

gkalpak commented Jun 15, 2016

gkalpak commented Jun 20, 2016

gkalpak commented Jun 20, 2016

felixzapata commented Jun 20, 2016

googlebot commented Jun 20, 2016

googlebot commented Jun 20, 2016

felixzapata commented Jun 20, 2016

gkalpak left a comment

gkalpak Dec 13, 2016

gkalpak Dec 13, 2016

felixzapata Dec 13, 2016

felixzapata commented Dec 13, 2016

felixzapata commented Dec 13, 2016

felixzapata commented Dec 14, 2016

gkalpak commented Dec 14, 2016

step-15 Accessibility #341

Are you sure you want to change the base?

step-15 Accessibility #341

Conversation

felixzapata commented May 28, 2016

felixzapata commented May 30, 2016

gkalpak commented May 30, 2016

felixzapata commented May 30, 2016

felixzapata commented May 31, 2016

felixzapata commented May 31, 2016 • edited Loading

gkalpak commented May 31, 2016

felixzapata commented May 31, 2016

gkalpak commented May 31, 2016

felixzapata commented May 31, 2016

gkalpak commented Jun 3, 2016

felixzapata commented Jun 15, 2016

gkalpak commented Jun 15, 2016

gkalpak commented Jun 20, 2016

gkalpak commented Jun 20, 2016

felixzapata commented Jun 20, 2016

googlebot commented Jun 20, 2016

googlebot commented Jun 20, 2016

felixzapata commented Jun 20, 2016

gkalpak left a comment

Choose a reason for hiding this comment

gkalpak Dec 13, 2016

Choose a reason for hiding this comment

gkalpak Dec 13, 2016

Choose a reason for hiding this comment

felixzapata Dec 13, 2016

Choose a reason for hiding this comment

felixzapata commented Dec 13, 2016

felixzapata commented Dec 13, 2016

felixzapata commented Dec 14, 2016

gkalpak commented Dec 14, 2016

felixzapata commented May 31, 2016 •

edited

Loading