Weird screen reader behavior when <link rel="stylesheet"> and inline style present

[mich...@chromium.org]

I was having trouble getting screen readers to consistently handle <paper-toggle-button>. I've pared it down to a very simple example.

I have a tiny custom element:

    <polymer-element name="my-button" role="button" aria-pressed="false"
        tabindex="0" noscript>
      <template>
        <link rel="stylesheet" href="whatever">
        <button>Hello</button>
      </template>
    </polymer-element>

On Windows with NVDA, a <my-button> is read as a "Toggle button" (which is correct). But a <my-button style="display: inline-block"> is read as "Button, pressed."

Weirdly the issue reproduces under a lot of circumstances:

• The <link rel="stylesheet"> can point to anything: a stylesheet, a blank page, a 404.
• The inline display value can be block, inline-block, flex, etc.
• Even if the <link>'d stylesheet and the inline style use the same property value for display.

I've tested this exact example with both NVDA and Windows-Eyes, getting similar results in Chrome 41 and 42.

Note that JSBin only has Polymer 0.3.3, but I've tested locally with 0.5.4 as well.

[Steve Faulkner]

On 9 February 2015 at 08:07, <mich...@chromium.org> wrote:

I was having trouble getting screen readers to consistently handle <paper-toggle-button>

I tested the example you provided on win 8.1 chrome Version 42.0.2299.0 canary and latest NVDA, could not replicate the issue.

--

Regards

SteveF

HTML 5.1

[mich...@chromium.org]

Hmm, thanks Steve. I've confirmed the repro using those same versions (NVDA 2014.4). I've attached a video showing the issue at http://crbug.com/456908 (you can skip to the halfway point).