fix(interactivity-checker): improve robustness of isTabbable #1950

devversion · 2016-11-21T16:46:43Z

A couple of notes:

It's intentional to not nest things like that, because such functions need to be clear.
You may have noticed that there are no specs for the Platform. It's just hard to mock the userAgent and stuff like v8BreakIterator without polluting the other tests.

References #1625

devversion · 2016-11-22T20:31:09Z

@jelbourn This should be ready for review now.

jelbourn · 2016-11-28T19:59:11Z

@devversion can you rebase?

devversion · 2016-11-28T20:03:58Z

@jelbourn Done.

jelbourn · 2016-11-28T23:02:48Z

src/lib/core/a11y/interactivity-checker.ts

@@ -16,6 +17,8 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class InteractivityChecker {

+  constructor(private platform: MdPlatform) {}


_platform

jelbourn · 2016-11-28T23:04:16Z

src/lib/core/a11y/interactivity-checker.ts

-    return getComputedStyle(element).getPropertyValue('visibility') == 'visible';
+    return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
+
+    function checkRectangles() {


This should be a module method with a description, similar to the others at the bottom of this file. I'd also call it something like hasGeometry or elementHasRenderedRect

Agreed. I really like hasGeometry

jelbourn · 2016-11-28T23:06:57Z

src/lib/core/a11y/interactivity-checker.ts

-    // See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12
-    if (!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)) {
+    // In IE11 audio elements with controls have invalid rectangles, but are still visible.
+    if (!isControlAudio && !checkRectangles()) {


Does this mean that an audio element with display: none or visibility: hidden will still be marked as visible?

Don't think that's correct. I re-confirmed within IE11 and Edge and this check seems to be unnecessary because we always want to check the rectangles / geometry - Good catch.

an <audio> with visibility: hidden should be fine, but I think it does miss the display: none case, maybe special-case TRIDENT/EDGE since other browsers have the correct behavior anyways

jelbourn · 2016-11-28T23:12:59Z

src/lib/core/a11y/interactivity-checker.ts

@@ -16,6 +17,8 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class InteractivityChecker {

+  constructor(private platform: MdPlatform) {}


Can you also update the class comment to just say

/** * Utility for checking the interactivity of an element, such as whether is * focusable or tabbable. */

And then add another // comment above it that explains how we drew much of this logic from ally.js, omitting checks for platforms and edge-cases we don't support?

jelbourn · 2016-11-28T23:17:17Z

src/lib/core/a11y/interactivity-checker.ts

@@ -122,3 +214,7 @@ function isPotentiallyFocusable(element: HTMLElement): boolean {
      hasValidTabIndex(element);
 }

+
+function getWindow(node: HTMLElement): Window {


Needs function description

jelbourn · 2016-11-28T23:18:22Z

src/lib/core/a11y/interactivity-checker.ts

+
+    let nodeName = element.nodeName.toLowerCase();
+    let frameElement = getWindow(element).frameElement as HTMLElement;
+    let frameType = frameElement && frameElement.nodeName.toLowerCase();


Declare frameType, nodeName, and tabIndexValue closer to where they're first used

jelbourn · 2016-11-28T23:45:56Z

src/lib/core/a11y/interactivity-checker.ts

@@ -106,6 +177,27 @@ function hasValidTabIndex(element: HTMLElement): boolean {
  return !!(tabIndex && !isNaN(parseInt(tabIndex, 10)));
 }

+function getTabIndexValue(element: HTMLElement) {


Needs function description that explains what this does beyond reading the tabIndex property directly.

jelbourn · 2016-11-28T23:49:12Z

src/lib/core/a11y/interactivity-checker.spec.ts

  /** Appends elements to the testContainerElement. */
  function appendElements(elements: Element[]) {
    for (let e of elements) {
      testContainerElement.appendChild(e);
    }
  }
+
+  function runIf(condition: boolean, runFn: Function): () => void {
+    return function() {


return () => {

?

We need to use a normal function because we want to retrieve the arguments below.

you can do (...args) => {

Good idea, I will change it - But anyways what's the advantage of an arrow function here? We don't need any access to the this context here

I don't think there's really much advantage to one way or the other, feel free to leave it as is unless Jeremy feels strongly

jelbourn · 2016-11-28T23:55:32Z

@mmalerba could you also take a look at this PR? I've spent so much time looking at the tabbable stuff I think a fresh perspective would be good

mmalerba · 2016-11-29T06:05:25Z

src/lib/core/platform/platform.ts

@@ -0,0 +1,41 @@
+import {Injectable, NgModule, ModuleWithProviders} from '@angular/core';
+
+// Declare window with type of any.


comment doesn't tell us anything the code doesn't

mmalerba · 2016-11-29T06:07:41Z

src/lib/core/platform/platform.ts

+
+  /** Browsers and Platform Types */
+  IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);


why FIREFOX and not a GECKO check above instead?

That's because it would be difficult to detect the plain Gecko layout engine, because actually every browser identifies it self as a Gecko-like browser.

Since we only need to check for Firefox explicit, we can just implement the firefox check instead of the unstable gecko check (http://webaim.org/blog/user-agent-string-history/)

Can you add that explanation as a comment?

mmalerba · 2016-11-29T06:08:38Z

src/lib/core/platform/platform.ts

+const hasV8BreakIterator = (window.Intl && (window.Intl as any).v8BreakIterator);
+
+@Injectable()
+export class MdPlatform {


document where you're getting these checks from

mmalerba · 2016-11-29T06:12:37Z

src/demo-app/platform/platform-demo.ts

+    <p>Is Webkit: {{ platform.WEBKIT }}</p>
+    <p>Is Trident: {{ platform.TRIDENT }}</p>
+    <p>Is Edge: {{ platform.EDGE }}</p>
+


extra blank line

mmalerba · 2016-11-29T06:12:57Z

src/demo-app/platform/platform-demo.ts

+})
+export class PlatformDemo {
+
+  constructor(public platform: MdPlatform) {}


remove extra blank lines

I don't think that's a big deal - Is there any specific convention in the Google JavaScript conventions? - Going to change it though.

I don't think there's any official convention for it, I just like to keep it consistent throughout the project. Most other files I've looked at seem to not leave space here

mmalerba · 2016-11-29T06:17:26Z

src/lib/core/a11y/interactivity-checker.spec.ts

+      // Do not run for Blink, Firefox and iOS because those treat video elements
+      // with controls different and are covered in other tests.
+      runIf(!platform.BLINK && !platform.FIREFOX && !platform.IOS, () => {
+


I don't think we need spaces between each line

mmalerba · 2016-11-29T06:23:20Z

src/lib/core/a11y/interactivity-checker.spec.ts

-            .toBe(false, `Expected <${el.nodeName} tabindex="-1"> not to be tabbable`);
+        elements.forEach(el => {
+          expect(checker.isFocusable(el))
+          .toBe(true, `Expected <${el.nodeName} tabindex="0"> to be focusable`);


indent +4 for continuation (here and elsewhere in this file)

mmalerba · 2016-11-29T06:28:52Z

src/lib/core/a11y/interactivity-checker.spec.ts

+
+        // Wait one tick, because the browser takes some time to update the tabIndex
+        // according to the contentEditable attribute.
+        setTimeout(() => {


is this really necessary? your code checks if the contenteditable attribute is set, shouldn't that work without waiting for the browser to update the tabindex?

Yeah it seems like the browser needs some time to validate the new tabindex.

Here is a snippet to test inside of Chrome 54

let div = document.createElement('div'); document.body.appendChild(div); div.contentEditable = true; console.log(div.tabIndex); // After that you will see `tabindex = -1` and if you now call console.log(div.tabIndex) // = 0

interesting, can we just change the timeout to 0 then, bumping to the end of the queue with no delay should be enough

@mmalerba Makes sense. Changed it.

mmalerba · 2016-11-29T16:01:30Z

src/lib/core/a11y/interactivity-checker.spec.ts

  /** Appends elements to the testContainerElement. */
  function appendElements(elements: Element[]) {
    for (let e of elements) {
      testContainerElement.appendChild(e);
    }
  }
+
+  function runIf(condition: boolean, runFn: Function): () => void {
+    return function() {


you can do (...args) => {

mmalerba · 2016-11-29T16:30:48Z

src/lib/core/a11y/interactivity-checker.ts

@@ -16,6 +17,8 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class InteractivityChecker {

+  constructor(private platform: MdPlatform) {}
+
  /** Gets whether an element is disabled. */
  isDisabled(element: HTMLElement) {


can probably improve this too:

return element.hasAttribute('disabled') || element.form && element.form.hasAttribute('disabled');

Would rather address things like that in another PR. We should keep that one as small as possible.

mmalerba · 2016-11-29T16:38:12Z

src/lib/core/a11y/interactivity-checker.ts

+    if (frameElement) {
+
+      // Frame elements inherit their tabindex onto all child elements.
+      if (getTabIndexValue(frameElement) === -1) {


so if an element inherits its tabindex through the frame it's definitely disabled? (because you have a few places below where if the user sets tabindex=-1 that doesn't necessarily mean non-tabbable, e.g. blink audio)

Yeah if the user explicitly set the tabindex attribute on the frame element then all child elements are not tabbable.

The checks below for the tabIndex only affect the element and not the frameElement

mmalerba · 2016-11-29T16:46:47Z

src/lib/core/a11y/interactivity-checker.ts

+    }
+
+    // In iOS the browser only considers some specific elements as tabbable.
+    if (this.platform.WEBKIT && this.platform.IOS && !isPotentiallyTabbable(element)) {


maybe call the method isPotentiallyTabbableOnIOS

devversion · 2016-11-29T17:30:22Z

@jelbourn @mmalerba Addressed your feedback.

mmalerba · 2016-11-29T18:20:28Z

LGTM

jelbourn · 2016-11-29T21:56:55Z

LGTM

angular-automatic-lock-bot · 2019-09-06T04:03:05Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

devversion added the pr: needs review label Nov 21, 2016

devversion assigned jelbourn Nov 21, 2016

devversion force-pushed the fix/focus-trap-robustness branch from bb1ec76 to 3971af5 Compare November 21, 2016 16:48

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 21, 2016

devversion added in progress This issue is currently in progress and removed pr: needs review labels Nov 21, 2016

devversion force-pushed the fix/focus-trap-robustness branch 3 times, most recently from bb310a3 to b575211 Compare November 22, 2016 18:56

devversion added pr: needs review and removed in progress This issue is currently in progress labels Nov 22, 2016

devversion force-pushed the fix/focus-trap-robustness branch from b575211 to 1fcc687 Compare November 22, 2016 20:05

fix(focus-trap): improve robustness

893e6f4

devversion force-pushed the fix/focus-trap-robustness branch from 1fcc687 to 893e6f4 Compare November 28, 2016 20:03

jelbourn reviewed Nov 28, 2016

View reviewed changes

jelbourn changed the title ~~fix(focus-trap): improve robustness~~ fix(interactivity-checked): improve robustness of isTabbable Nov 28, 2016

jelbourn changed the title ~~fix(interactivity-checked): improve robustness of isTabbable~~ fix(interactivity-checker): improve robustness of isTabbable Nov 28, 2016

mmalerba self-assigned this Nov 29, 2016

mmalerba reviewed Nov 29, 2016

View reviewed changes

devversion added 3 commits November 29, 2016 18:15

Address feedback

94219ee

Remove extra blank line.

b671142

Address additional feedback

8c9d1bf

Change timeout delay

3573d81

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Nov 29, 2016

tinayuangao merged commit 4b7e52d into angular:master Nov 30, 2016

devversion deleted the fix/focus-trap-robustness branch November 30, 2016 20:01

timvdalen mentioned this pull request Dec 11, 2016

hasV8BreakIterator breaks in environments without window (such as universal rendering) #2171

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

		@@ -0,0 +1,41 @@
		import {Injectable, NgModule, ModuleWithProviders} from '@angular/core';

		// Declare window with type of any.

fix(interactivity-checker): improve robustness of isTabbable #1950

fix(interactivity-checker): improve robustness of isTabbable #1950

Conversation

devversion commented Nov 21, 2016

devversion commented Nov 22, 2016

jelbourn commented Nov 28, 2016

devversion commented Nov 28, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn commented Nov 28, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devversion Nov 29, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devversion commented Nov 29, 2016

mmalerba commented Nov 29, 2016

jelbourn commented Nov 29, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

devversion Nov 29, 2016 •

edited

Loading