Consider element with height or width of 0 as invisible unless the text overflows

.github/workflows/integrate.yml

@@ -11,9 +11,11 @@ jobs:
     name: Build
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest]
+        os: [ ubuntu-latest, windows-latest ]
         node: [12, 14]
     runs-on: ${{ matrix.os }}
+    env:
+      NODE_OPTIONS: "--max-old-space-size=4096"
     steps:
       - uses: actions/[email protected]
       - uses: actions/[email protected]

README.md

@@ -131,7 +131,7 @@ Alfa will run in any [ECMAScript 2018](https://www.ecma-international.org/ecma-2
 In order to build Alfa, a recent version (>= 12) of [Node.js](https://nodejs.org/) is required in addition to the [Yarn](https://yarnpkg.com/) package manager. Once Node.js and Yarn are installed, go ahead and install the Alfa development dependencies:
 
 ```console
-$ yarn install
+$ yarn install --immutable
 ```
 
 When done, you can start a watcher that watches source files for changes and kicks off the associated build steps when they change:
@@ -148,6 +148,18 @@ As new code is pulled from the repository, changes to dependencies and code may
 $ yarn build
 ```
 
+If you want to run tests and make sure everything is working, use:
+
+```console
+$ yarn test
+```
+
+When working on a specific package, you can run only these tests:
+
+```console
+$ yarn test packages/alfa-<package-name>
+```
+
 If you would like to contribute to Alfa, make sure to check out the [contribution guidelines](docs/contributing.md). If you have any questions, you are also welcome to [open an issue][].
 
 ## Architecture

packages/alfa-aria/src/name.ts

@@ -610,7 +610,13 @@ export namespace Name {
     // https://w3c.github.io/accname/#step1
     // Step 1 is skipped when referencing due to step 2B.ii.b
     // https://w3c.github.io/accname/#step2B.ii.b
-    if (!state.isReferencing && role.some((role) => role.isNameProhibited())) {
+    // Step 1 is skipped when descending due to step 2F.iii.b
+    // https://w3c.github.io/accname/#step2B.iii.b
+    if (
+      !state.isReferencing &&
+      !state.isDescending &&
+      role.some((role) => role.isNameProhibited())
+    ) {
       return None;
     }
 

packages/alfa-aria/src/role.ts

@@ -241,7 +241,6 @@ export class Role<N extends Role.Name = Role.Name>
 
     return false;
   }
-
   /**
    * Get the implicit value of the specified attribute, if any.
    */

packages/alfa-aria/test/name.spec.tsx

@@ -473,6 +473,86 @@ test(`.from() determines the name of an <a> element with text in its subtree,
   });
 });
 
+test(`.from() determines the name of an <a> element with text in its subtree,
+      when the source is nested and doesn't itself allow naming`, (t) => {
+  const a = (
+    <a href="#" title="Content">
+      <p>Hello world</p>
+    </a>
+  );
+
+  t.deepEqual(Name.from(a, device).toJSON(), {
+    type: "some",
+    value: {
+      value: "Hello world",
+      sources: [
+        {
+          type: "descendant",
+          element: "/a[1]",
+          name: {
+            value: "Hello world",
+            sources: [
+              {
+                type: "descendant",
+                element: "/a[1]/p[1]",
+                name: {
+                  value: "Hello world",
+                  sources: [
+                    {
+                      type: "data",
+                      text: "/a[1]/p[1]/text()[1]",
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+});
+
+test(`.from() determines the name of an <a> element with text in its subtree,
+      when the source is nested and presentational`, (t) => {
+  const a = (
+    <a href="#" title="Content">
+      <span role="none">Hello world</span>
+    </a>
+  );
+
+  t.deepEqual(Name.from(a, device).toJSON(), {
+    type: "some",
+    value: {
+      value: "Hello world",
+      sources: [
+        {
+          type: "descendant",
+          element: "/a[1]",
+          name: {
+            value: "Hello world",
+            sources: [
+              {
+                type: "descendant",
+                element: "/a[1]/span[1]",
+                name: {
+                  value: "Hello world",
+                  sources: [
+                    {
+                      type: "data",
+                      text: "/a[1]/span[1]/text()[1]",
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  });
+});
+
 test(`.from() determines the name of an <a> element with text in its subtree,
       when there are multiple nested sources`, (t) => {
   const a = (

packages/alfa-css/src/syntax/nth.ts

@@ -92,6 +92,12 @@ export class Nth implements Iterable<Token>, Equatable, Serializable {
       offset: this._offset,
     };
   }
+
+  public toString(): string {
+    return this._step === 0
+      ? `${this._offset}`
+      : `${this._step}n+${this._offset};`;
+  }
 }
 
 /**

packages/alfa-rules/src/common/expectation/get-colors.ts

@@ -134,6 +134,17 @@ function getLayers(
       return None;
     }
 
+    // If there is a background-size, we currently have no way of guessing
+    // whether it is large enough to go under the text or not.
+    // So we simply bail out.
+    if (
+      !style
+        .computed("background-size")
+        .value.equals(style.initial("background-size").value)
+    ) {
+      return None;
+    }
+
     // For each gradient, we extract all color stops into a background layer of
     // their own. As gradients need a start and an end point, there will always
     // be at least two color stops.

packages/alfa-rules/src/common/predicate/has-border.ts

@@ -17,9 +17,6 @@ export function hasBorder(
     return sides.some(
       (side) =>
         style.computed(`border-${side}-width` as const).none(Length.isZero) &&
-        style
-          .computed(`border-${side}-style` as const)
-          .none((style) => style.value === "none") &&
         style
           .computed(`border-${side}-color` as const)
           .none((color) => color.type === "color" && Color.isTransparent(color))

packages/alfa-rules/src/common/predicate/has-role.ts

@@ -1,15 +1,21 @@
-import { Role } from "@siteimprove/alfa-aria";
+import { Node, Role } from "@siteimprove/alfa-aria";
+import { Device } from "@siteimprove/alfa-device";
 import { Element } from "@siteimprove/alfa-dom";
 import { Predicate } from "@siteimprove/alfa-predicate";
 
-export function hasRole(predicate?: Predicate<Role>): Predicate<Element>;
+export function hasRole(
+  device: Device,
+  predicate?: Predicate<Role>
+): Predicate<Element>;
 
 export function hasRole<N extends Role.Name>(
+  device: Device,
   name: N,
   ...rest: Array<N>
 ): Predicate<Element>;
 
 export function hasRole(
+  device: Device,
   nameOrPredicate: Predicate<Role> | Role.Name = () => true,
   ...names: Array<Role.Name>
 ): Predicate<Element> {
@@ -21,5 +27,5 @@ export function hasRole(
     predicate = Role.hasName(nameOrPredicate, ...names);
   }
 
-  return (element) => Role.from(element).some(predicate);
+  return (element) => Node.from(element, device).role.some(predicate);
 }

packages/alfa-rules/src/common/predicate/is-clipped.ts

@@ -64,6 +64,52 @@ function isClippedBySize(
           }
         }
       }
+
+      if (x.value === "auto" || y.value === "auto") {
+        const { value: height } = style.computed("height");
+        const { value: width } = style.computed("width");
+
+        for (const dimension of [height, width]) {
+          switch (dimension.type) {
+            case "percentage":
+              if (dimension.value <= 0) {
+                return true;
+              } else {
+                break;
+              }
+
+            case "length":
+              if (dimension.value <= 1) {
+                return true;
+              } else {
+                break;
+              }
+          }
+        }
+      }
+
+      if (x.value === "scroll" || y.value === "scroll") {
+        const { value: height } = style.computed("height");
+        const { value: width } = style.computed("width");
+
+        for (const dimension of [height, width]) {
+          switch (dimension.type) {
+            case "percentage":
+              if (dimension.value <= 0) {
+                return true;
+              } else {
+                break;
+              }
+
+            case "length":
+              if (dimension.value <= 1) {
+                return true;
+              } else {
+                break;
+              }
+          }
+        }
+      }
     }
 
     for (const parent of node.parent({ flattened: true })) {

packages/alfa-rules/src/common/predicate/is-tabbable.ts

@@ -14,10 +14,10 @@ const { and, not } = Predicate;
 export function isTabbable(device: Device): Predicate<Element> {
   return and(
     hasTabIndex((tabIndex) => tabIndex >= 0),
-    and(
-      not(redirectsFocus),
-      and(not(isDisabled), not(isInert(device)), isRendered(device))
-    )
+    not(redirectsFocus),
+    not(isDisabled),
+    not(isInert(device)),
+    isRendered(device)
   );
 }
 

packages/alfa-rules/src/sia-r10/rule.ts

@@ -33,7 +33,7 @@ export default Rule.Atomic.of<Page, Attribute>({
               hasAttribute("autocomplete", hasTokens),
               or(
                 isTabbable(device),
-                hasRole((role) => role.isWidget())
+                hasRole(device, (role) => role.isWidget())
               ),
               isPerceivable(device),
               (element) =>

packages/alfa-rules/src/sia-r11/rule.ts

@@ -31,7 +31,7 @@ export default Rule.Atomic.of<Page, Element>({
           .filter(
             and(
               hasNamespace(Namespace.HTML),
-              hasRole("link"),
+              hasRole(device, "link"),
               not(isIgnored(device))
             )
           );

packages/alfa-rules/src/sia-r12/rule.ts

@@ -27,7 +27,7 @@ export default Rule.Atomic.of<Page, Element>({
             and(
               not(hasInputType("image")),
               hasNamespace(Namespace.HTML),
-              hasRole("button"),
+              hasRole(device, "button"),
               not(isIgnored(device))
             )
           );