HTML disabled text field using aria-label not reading aria-label

[michelhebert]

Hi,

I'm running into an issue in IE11 where a disabled text field using aria-label is still reading it's <label> content instead of the aria-label value.

Based on the ARIA spec, aria-label should take precedence.

JSFiddle example: https://jsfiddle.net/33xw9snp/

Code used in the JSFiddle example:

<form>
  <fieldset>
    <legend>
        Please enter your phone number
    </legend>
    <div>
      <label for="phone-number">Phone number</label>
      <input type="text" id="phone-number" disabled>
    </div>
    <div>
      <label for="phone-extension">Ext.</label>
      <input type="text" id="phone-extension" aria-label="Extension" disabled>
    </div>
  </fieldset>
</form>

I haven't seen an issue opened/closed for this, so here you go.

Thanks!
Michel

[Adriani90]

@michelhebertI cannot reproduce this issue in IE11 and NVDA 2019.1. Could you please test if you are still having this problem?

[Adriani90]

Ok the initial author does not seem to be available anymore.

[ehollig]

@michelhebert are you still experiencing this issue in Internet Explorer? @Adriani90 was not able to from #7029 (comment)

[michelhebert]

@ehollig Still here, just a little delayed in responding. I just updated NVDA 2019.2 and ran it against the example with IE11. I'm still seeing the same issue.

What does NVDA output in the viewer for you?

I get the following:

    Please enter your phone number     
Phone number
edit  unavailable
 
Ext.
edit  unavailable

[Adriani90]

Closing as duplicate of #12177 which contains more discussion and is reproducible in every browser just like this one as well.