Binding on role attribute not working in Firefox

[TimVevida]

I'm submitting a bug report

• Library Version: 2.3.1

• OS Kubuntu 18.04

• Browser: Does not work in Firefox 67.0 Does work in Chromium 74.0.3729.169

Current behavior: Binding on the role attribute of an element does not work correctly. The role attribute is completely omitted, either using role.bind or the role attribute with interpolation.

Expected/desired behavior:

Unfortunately, the Gist Run is not saving at the moment, so I will just show some sample code:

• app.html

<template>
  <button click.trigger="presentation = !presentation">Toggle presentation role</button>
  <br/>
  Presentation: ${presentation}
  <table role.bind="presentation ? 'presentation' : null">
    <tr>
      <td>Hello</td>
      <td>world!</td>
    </tr>
  </table>
</template>

• app.js

export class App {
  presentation = true;
}

• What is the expected behavior? The role attribute is shown and updated when the binding changes.

• What is the motivation / use case for changing the behavior? I want to use the role attribute for accessibility purposes.

Possibly related to #486.

[AsenTahchiyski]

Not working in Chrome as well, so I guess not working at all.

[bigopon]

Thanks for notifying. Ill have a look

[bigopon]

I've identified the issue and created a fix demo here https://codesandbox.io/s/heuristic-leftpad-13uhl

A PR will be coming soon. For now, please do the following in your entry to temporarily fix it:

import {
  ObserverLocator,
  DOM,
  dataAttributeAccessor,
  propertyAccessor
} from 'aurelia-framework';

ObserverLocator.prototype.getAccessor = function(obj, propertyName) {
  if (obj instanceof DOM.Element) {
    if (propertyName === 'class'
      || propertyName === 'style' || propertyName === 'css'
      || propertyName === 'value' && (obj.tagName.toLowerCase() === 'input' || obj.tagName.toLowerCase() === 'select')
      || propertyName === 'checked' && obj.tagName.toLowerCase() === 'input'
      || propertyName === 'model' && obj.tagName.toLowerCase() === 'input'
      || /^xlink:.+$/.exec(propertyName)) {
      return this.getObserver(obj, propertyName);
    }
    if (/^\w+:|^data-|^aria-/.test(propertyName)
      || propertyName === 'role'
      || obj instanceof DOM.SVGElement && this.svgAnalyzer.isStandardSvgAttribute(obj.nodeName, propertyName)
      || obj.tagName.toLowerCase() === 'img' && propertyName === 'src'
      || obj.tagName.toLowerCase() === 'a' && propertyName === 'href'
    ) {
      return dataAttributeAccessor;
    }
  }
  return propertyAccessor;
}

[AsenTahchiyski]

Thanks bigopon, works as expected with interpolation.