bbc-a11y 0.1.2 → 0.2.0

data/features/check_standards/{minimum_text_size.feature → 08_minimum_text_size.feature}

@@ -13,7 +13,7 @@ Feature: Minimum text size
   with browser tools to resize content.
 
   Scenario: Small text
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <style>
         body {
@@ -26,7 +26,7 @@ Feature: Minimum text size
       </style>
       <span>Some text</span> with <span>more <b>text</b> also</span>.
       """
-    When I validate the "minimum text size" standard
+    When I validate the "Minimum text size: text cannot be too small" standard
     Then it fails with the message:
       """
       Text size too small (10px): /html/body
@@ -34,3 +34,23 @@ Feature: Minimum text size
       Text size too small (10px): /html/body/span[2]
       Text size too small (9px): /html/body/span[2]/b
       """
+
+    Scenario: Hidden elements with small text
+      Given a page with the body:
+        """
+        <style>
+          span { display: none; }
+        </style>
+        <span style="font-size: 1px">Tiny text, but it's hidden!</span>
+        """
+      When I validate the "Minimum text size: text cannot be too small" standard
+      Then it passes
+
+    Scenario: Text nodes with only whitespace
+      Given a page with the body:
+        """
+        <div id="blq-global" style="font-size: 1px"> <div id="blq-pre-mast">  </div> &nbsp;
+        </div>
+        """
+      When I validate the "Minimum text size: text cannot be too small" standard
+      Then it passes

data/features/check_standards/09_resizable_text.feature

@@ -0,0 +1,2 @@
+Feature: Resizable Text
+  

data/features/check_standards/{tab_index.feature → 10_tab_index.feature}

@@ -1,4 +1,4 @@
-Feature: Correctly use `tabindex` attributes
+Feature: Tab Index
 
   Positive `tabindex` attribute values **must not** be used to create a logical tab order.
 
@@ -18,17 +18,17 @@ Feature: Correctly use `tabindex` attributes
   control such as a `<a>` or `<button>`.
 
   Scenario: Element with negative tab index
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <a href="/news">News</a>
       <button type="submit">Search</button>
       <div tabindex="-1"></div>
       """
-    When I validate the "elements with zero tab index must be fields" standard
+    When I validate the "Tab index: elements with zero tab index must be fields" standard
     Then it passes
 
   Scenario: Focusable elements with zero tab index
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <a href="/news" tabindex="0">News</a>
       <button tabindex="0">Search</button>
@@ -36,18 +36,18 @@ Feature: Correctly use `tabindex` attributes
       <select tabindex="0"></select>
       <textarea tabindex="0"></textarea>
       """
-    When I validate the "elements with zero tab index must be fields" standard
+    When I validate the "Tab index: elements with zero tab index must be fields" standard
     Then it passes
 
   Scenario: Unfocusable element with zero tab index
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <a href="/news" tabindex="1">News</a>
       <button type="submit" tabindex="2">Search</button>
       <div tabindex="3"></div>
       <div tabindex="0"></div>
       """
-    When I validate the "elements with zero tab index must be fields" standard
+    When I validate the "Tab index: elements with zero tab index must be fields" standard
     Then it fails with the message:
       """
       Non-field element with tabindex=0: /html/body/div[2]

data/features/check_standards/{title_attribute.feature → 11_title_attributes.feature}

@@ -1,4 +1,4 @@
-Feature: Correctly use `title` attributes
+Feature: Title Attributes
 
   `title` attributes **must not** be used for critical information and **must not** repeat content that is already visible and associated with the same control or content.
 
@@ -17,23 +17,31 @@ Feature: Correctly use `title` attributes
   - Do not use `title` attributes and explicit labels together on form fields
 
   Scenario: Form field with title attribute
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <button type="button" title="Close Button">
         <img src="close.png" />
       </button>
       """
-    When I validate the "title attributes only on inputs" standard
+    When I validate the "Title attributes: title attributes only on inputs" standard
+    Then it passes
+
+  Scenario: Hidden element with title attribute
+    Given a page with the body:
+      """
+      <iframe style="display:none" title="Ignore me, I'm invisible"></iframe>
+      """
+    When I validate the "Title attributes: title attributes only on inputs" standard
     Then it passes
 
   Scenario: Anchor tag with title attribute
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <a href="close" title="Close Button">
         <img src="close.png" />
       </a>
       """
-    When I validate the "title attributes only on inputs" standard
+    When I validate the "Title attributes: title attributes only on inputs" standard
     Then it fails with the message:
       """
       Non-input element has title attribute: /html/body/a

data/features/check_standards/{focusable_controls.feature → 12_focusable_controls.feature}

@@ -33,7 +33,7 @@ Feature: Focusable Controls
   causing confusion to users.
 
   Scenario: All anchor tags have href attributes
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <button type="button">Open panel</button>
       <ul>
@@ -42,11 +42,11 @@ Feature: Focusable Controls
           <li><a href="#entertainmenttab">Entertainment</a></li>
       </ul>
       """
-    When I validate the "anchors must have hrefs" standard
+    When I validate the "Focusable controls: anchors must have hrefs" standard
     Then it passes
 
   Scenario: Some anchor tags do not have href attributes
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <ul>
           <li><a>News</a></li>
@@ -54,7 +54,7 @@ Feature: Focusable Controls
           <li><a>Entertainment</a></li>
       </ul>
       """
-    When I validate the "anchors must have hrefs" standard
+    When I validate the "Focusable controls: anchors must have hrefs" standard
     Then it fails with the message:
       """
       Anchor has no href attribute: /html/body/ul/li[1]/a

data/features/check_standards/13_visible_on_focus.feature

@@ -0,0 +1 @@
+Feature: Visible On Focus

data/features/check_standards/14_control_styles.feature

@@ -0,0 +1 @@
+Feature: Control Styles

data/features/check_standards/15_focus_styles.feature

@@ -0,0 +1 @@
+Feature: Focus Styles

data/features/check_standards/16_colour_contrast.feature

@@ -0,0 +1 @@
+Feature: Colour Contrast

data/features/check_standards/17_colour_and_meaning.feature

@@ -0,0 +1 @@
+Feature: Colour And Meaning

data/features/check_standards/{image_alt.feature → 18_image_alternatives.feature}

@@ -1,4 +1,4 @@
-Feature: Image alternative content
+Feature: Image Alternatives
 
   All images **must** have an alt attribute.
 
@@ -18,21 +18,21 @@ Feature: Image alternative content
   the value of the alt attribute or in the immediately surrounding text content.
 
   Scenario: Images with alt attributes
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <img src="a.jpeg" alt="A picture of something" />
       <img src="b.jpeg" alt="" />
       """
-    When I validate the "images must have alt attributes" standard
+    When I validate the "Image alternatives: images must have alt attributes" standard
     Then it passes
 
   Scenario: Images without alt attributes
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <img src="a.jpeg" alt="A picture of something" />
       <img src="b.jpeg" />
       """
-    When I validate the "images must have alt attributes" standard
+    When I validate the "Image alternatives: images must have alt attributes" standard
     Then it fails with the message:
       """
       Image has no alt attribute: /html/body/img[2]

data/features/check_standards/{form_labels.feature → 19_form_labels.feature}

@@ -1,4 +1,4 @@
-Feature: Correctly use form labels
+Feature: Form Labels
 
   Form fields that allow input (`select`, and `textarea` elements, and all
   `input` element types other than image, submit, reset, button, or hidden)
@@ -17,7 +17,7 @@ Feature: Correctly use form labels
   reasonably expect to be able to use.
 
   Scenario: All fields have labels or title attributes
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <label for="search">Search the BBC</label>
       <input type="text" id="search" name="q" />
@@ -29,11 +29,11 @@ Feature: Correctly use form labels
 
       <input type="text" name="q" title="Search the BBC" />
       """
-    When I validate the "fields must have labels or titles" standard
+    When I validate the "Form labels: fields must have labels or titles" standard
     Then it passes
 
   Scenario: Some fields without labels or title attributes
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <input type="text" name="name" title="Name" />
       <input type="email" name="email" title="Email" />
@@ -44,7 +44,7 @@ Feature: Correctly use form labels
       <input type="text" name="q" aria-label="Search the BBC" />
       <input type="text" name="q" placeholder="Search the BBC" />
       """
-    When I validate the "fields must have labels or titles" standard
+    When I validate the "Form labels: fields must have labels or titles" standard
     Then it fails with the message:
       """
       Field has no label or title attribute: /html/body/textarea
@@ -56,9 +56,9 @@ Feature: Correctly use form labels
 
   Scenario: Hidden fields do not need titles
 
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <input type=hidden name=a value=b>
       """
-    When I validate the "fields must have labels or titles" standard
+    When I validate the "Form labels: fields must have labels or titles" standard
     Then it passes

data/features/check_standards/{form_interactions.feature → 20_form_interactions.feature}

@@ -19,7 +19,7 @@ Feature: Form Interactions
   beneficial to low vision users as an indication of the end of the form.
 
   Scenario: Form with a submit input
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <form action="/search">
         <label for="q">Search term:</label>
@@ -27,24 +27,24 @@ Feature: Form Interactions
         <input type="submit" value="Search">
       </form>
       """
-    When I validate the "forms must have submit buttons" standard
+    When I validate the "Form interactions: forms must have submit buttons" standard
     Then it passes
 
   Scenario: Form with no submit button
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <form action="/search">
         <label for="q">Search term:</label>
         <input type="text" name="q" id="q">
       </form>
       """
-    When I validate the "forms must have submit buttons" standard
+    When I validate the "Form interactions: forms must have submit buttons" standard
     Then it fails with the message:
       """
       Form has no submit button: /html/body/form
       """
   Scenario: Form with a submit button
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <form action="/search">
         <label for="q">Search term:</label>
@@ -52,5 +52,5 @@ Feature: Form Interactions
         <button type="submit">Search</button>
       </form>
       """
-    When I validate the "forms must have submit buttons" standard
+    When I validate the "Form interactions: forms must have submit buttons" standard
     Then it passes

data/features/check_standards/21_tables.feature

@@ -0,0 +1 @@
+Feature: Tables

data/features/cli/display_failing_result.feature

@@ -6,5 +6,18 @@ Feature: Display failing result
     Then it should fail with:
       """
       ✗ http://localhost:54321/missing_header.html
-        - Found 0 h1 elements.
+        * Headings: Exactly one main heading
+          - Found 0 h1 elements.
+      """
+
+  Scenario: Two standards fail
+    Given a website running at http://localhost:54321
+    When I run `a11y http://localhost:54321/two_headings_failures.html`
+    Then it should fail with:
+      """
+      ✗ http://localhost:54321/two_headings_failures.html
+        * Headings: Content must follow headings
+          - No content follows: /html/body/h2
+        * Headings: Exactly one main heading
+          - Found 0 h1 elements.
       """

data/features/cli/display_result_summary.feature

@@ -7,7 +7,7 @@ Feature: Display result summary
       page "http://localhost:54321/perfect.html"
       page "http://localhost:54321/missing_header.html"
       page "http://localhost:54321/missing_header.html?again!" do
-        skip_standard "exactly one main heading"
+        skip_standard "Headings: exactly one main heading"
       end
       """
     When I run `a11y`
@@ -15,3 +15,17 @@ Feature: Display result summary
       """
       3 pages checked, 1 error found, 1 standard skipped
       """
+
+  Scenario: Reminds users to consider usability beyond lint results
+    Given a website running at http://localhost:54321
+    When I run `a11y http://localhost:54321/perfect.html`
+    Then it should pass with:
+      """
+      No errors found. But please remember:
+
+      "Testing shows the presence, not the absence of bugs" -- Edsger W. Dijkstra
+
+      I am only a robot. Always make time to perform manual testing using assistive
+      technologies like VoiceOver, JAWS and NVDA to make sure you're providing a good
+      user experience.
+      """

data/features/cli/provide_muting_tips.feature

@@ -5,7 +5,7 @@ Feature: Provide muting tips
   warning.
 
   Scenario: Generate a warning where there are several bad elements
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <div id="my-amazing-code">
         <h1>I am wonderfull</h1>

data/features/cli/skipping_standards.feature

@@ -5,7 +5,7 @@ Feature: Skipping Standards
     And a file named "a11y.rb" with:
       """
       page "http://localhost:54321/missing_header.html" do
-        skip_standard "exactly one main heading"
+        skip_standard "Headings: exactly one main heading"
       end
       """
     When I run `a11y`

data/features/mute_errors.feature

@@ -12,11 +12,11 @@ Feature: Mute errors
     real examples?
 
   Scenario: Mute any errors from a specific standard
-    Given a page with the HTML:
+    Given a page with the body:
       """
       <p>yo</p>
       """
-    When I validate the "exactly one main heading" standard
+    When I validate the "Headings: exactly one main heading" standard
     Then it fails with the message:
       """
       Found 0 h1 elements.

data/features/step_definitions/steps.rb

@@ -1,6 +1,5 @@
 require 'capybara'
 require 'bbc/a11y/linter'
-require 'bbc/a11y/standards'
 require 'bbc/a11y/javascript'
 
 Given(/^a website running at http:\/\/localhost:(\d+)$/) do |port|
@@ -17,21 +16,23 @@ Given(/^one test fails$/) do
   step "I run `a11y http://localhost:54321/missing_header.html`"
 end
 
-Given(/^a page with the HTML:$/) do |string|
+Given(/^a page with the HTML:$/) do |html|
   WebServer.ensure_running_on(54321)
-  WebServer.write_page "scenario.html", "<html><body>#{string}</body></html>"
-  browser.visit 'http://localhost:54321/scenario.html'
+  browser.visit 'http://localhost:54321/blank.html'
+  browser.execute_script "document.write(#{html.to_json});"
 end
 
-After do
-  WebServer.delete_page "scenario.html"
+Given(/^a page with the body:$/) do |body_html|
+  WebServer.ensure_running_on(54321)
+  browser.visit 'http://localhost:54321/blank.html'
+  browser.execute_script "document.body.innerHTML = #{body_html.to_json}"
 end
 
 When(/^I validate the \"([^\"]+)\" standard$/) do |standard_name|
   browser.execute_script(BBC::A11y::Javascript.bundle)
   validation = browser.evaluate_script("a11y.validate(#{standard_name.to_json})")
   if validation['results'].size != 1
-    raise "#{validation['results'].size} standards match '#{pattern}'"
+    raise "#{validation['results'].size} standards match '#{standard_name}' (expected 1 match)"
   end
   @result = BBC::A11y::LintResult.from_json(validation)
 end
@@ -42,7 +43,7 @@ end
 
 Then(/^it fails with the message:$/) do |message|
   expect(@result).to be_failed
-  expect(@result.to_s).to eq message.to_s
+  expect(@result.errors.map { |e| e.message}.join("\n")).to eq message
 end
 
 Given(/^I am using a TTY terminal$/) do
@@ -60,7 +61,7 @@ end
 
 Then(/^I see red in the output$/) do
   all_output = all_commands.map { |c| c.output }.join("\n")
-  expect(all_output).to include('[0;31;49m✗')
+  expect(all_output).to include("\e[31m✗")
 end
 
 Then(/^I see monochrome output$/) do