Add element XPath to result about pa11y HOT 14 CLOSED

@adelevie, opening a new issue for discussions around xpath. This would be really useful

from pa11y.

Potentially dumb question, but how does HTML Code Sniffer know where to place the tooltips when running a sniff?

from pa11y.

Each message in HTML CodeSniffer has a reference to a DOM element so I guess it just calculates where to place the tooltip based on it's dimensions and position. I did a bit of investigation into capturing screenshots of these with pa11y but it's a considerable amount of work

from pa11y.

I'd be less interested in screenshots, but would love to get the XPaths or CSS selectors of these elements from pa11y. The end goal is a "flat" HTML page of the rendered test page with the tool tips. I want to make reports linkable, rather than asking folks to install and run the HTML CS bookmarklet.

from pa11y.

See 18F/pulse#195 for some context of my goals.

from pa11y.

Ah I see, well I know it'd also be really useful for pa11y-dashboard on our side, so I'll definitely get time to implement something. Do you have a preference for XPath/CSS? If they're simple enough to implement I could add both or make it configurable.

from pa11y.

I don't have a preference--my only goal is to be empowered to create my own HTML tooltips for "static" reports. Whichever element identifier makes that happen is what I want. Let me know if/how I can help with this.

from pa11y.

Here's a (horrible) proof of concept for CSS selectors. In inject.js:

  function fullPath(el){
    var names = [];
    while (el.parentNode){
      if (el.id){
        names.unshift('#'+el.id);
        break;
      }else{
        if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
        else{
          for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
          names.unshift(el.tagName+":nth-child("+c+")");
        }
        el=el.parentNode;
      }
    }
    return names.join(" > ");
  }

    function processMessageHtml (element) {
        var outerHTML = null;
        var innerHTML = null;
        if (!element.outerHTML) {
            return outerHTML;
        }
        outerHTML = element.outerHTML;
        if (element.innerHTML.length > 31) {
            innerHTML = element.innerHTML.substr(0, 31) + '...';
            outerHTML = outerHTML.replace(element.innerHTML, innerHTML);
        }
        if (outerHTML.length > 251) {
            outerHTML = outerHTML.substr(0, 250) + '...';
        }

    var css_selector = fullPath(element);

        return outerHTML+" css selector: " + css_selector;
    }

from pa11y.

Thanks @adelevie, I might tackle this tomorrow morning or Wednesday as I'm relatively free, I'd quite like to supply both CSS and XPath. Shouldn't be too complicated based on your proof of concept, I can just abstract out the element traversal and then string together XPath or CSS :)

from pa11y.

Great! Can you ensure that these new values are available as separate
attributes? (And not just glommed onto a string like in my example)
On Jun 8, 2015 6:40 PM, "Rowan Manning" [email protected] wrote:

Thanks @adelevie https://github.com/adelevie, I might tackle this
tomorrow morning or Wednesday as I'm relatively free, I'd quite like to
supply both CSS and XPath. Shouldn't be too complicated based on your proof
of concept, I can just abstract out the element traversal and then string
together XPath or CSS :)

—
Reply to this email directly or view it on GitHub
#77 (comment).

from pa11y.

Yes, I was thinking something like:

{
    code: 'foo',
    message: 'bar',
    context: 'baz',
    type: 'error',
    typeCode: 1,
    selectors: {
        xpath: '/html/body/p[0]',
        css: 'html > body > p:nth-child(1)'
    }
}

from pa11y.

Perfect!
On Jun 9, 2015 4:28 AM, "Rowan Manning" [email protected] wrote:

Yes, I was thinking something like:

{
code: 'foo',
message: 'bar',
context: 'baz',
type: 'error',
typeCode: 1,
selectors: {
xpath: '/html/body/p[0]',
css: 'html > body > p:nth-child(1)'
}
}

—
Reply to this email directly or view it on GitHub
#77 (comment).

from pa11y.

@adelevie I added the CSS selector in #78, It'd be great if you had time to cast your eyes over it. I might add XPath at some point but it was proving difficult to test. The Format has changed to:

{
    code: 'foo',
    message: 'bar',
    context: 'baz',
    type: 'error',
    typeCode: 1,
    selector: 'html > body > p:nth-child(1)'
}

from pa11y.

CSS selector added in #78. Open a new issue if XPath is required later

from pa11y.