fix(engine): handling AOM properties on anchor tags

packages/lwc-engine/src/framework/__tests__/issue-487.spec.ts

@@ -0,0 +1,27 @@
+import { createElement, LightningElement } from '../main';
+
+describe('issue 487', () => {
+    it('should not throw when setting AOM property on anchor', () => {
+        class MyComponent extends LightningElement {
+            setAriaSelected() {
+                this.template.querySelector('a').ariaSelected = 'true';
+            }
+            render() {
+                return function ($api, $cmp) {
+                    return [
+                        $api.h('a', { key: 0 }, []),
+                    ]
+                }
+            }
+        }
+
+        MyComponent.publicMethods = ['setAriaSelected'];
+
+        const element = createElement('x-foo', { is: MyComponent }) as HTMLAnchorElement;
+        document.body.appendChild(element);
+        element.href = 'https://google.com';
+        expect(() => {
+            element.setAriaSelected();
+        }).not.toThrow();
+    });
+});

packages/lwc-engine/src/polyfills/aria-properties/polyfill.ts

@@ -86,11 +86,11 @@ function getAriaPropertyMap(elm: HTMLElement): AriaPropMap {
 }
 
 function isShadowRoot(elmOrShadow: Element | ShadowRoot): elmOrShadow is ShadowRoot {
-    return 'host' in elmOrShadow;
+    return !(elmOrShadow instanceof Element) && 'host' in elmOrShadow;
 }
 
 function isSignedCustomElement(elmOrShadow: Element | ShadowRoot): elmOrShadow is HTMLElement {
-    return !('host' in elmOrShadow) && getNodeKey(elmOrShadow) !== undefined;
+    return !isShadowRoot(elmOrShadow) && getNodeKey(elmOrShadow) !== undefined;
 }
 
 function getNormalizedAriaPropertyValue(propName: string, value: any): any {

packages/lwc-integration/src/components/accessibility/test-anchor-aom-setter/anchor-aom-setter.spec.js

@@ -0,0 +1,14 @@
+const assert = require('assert');
+describe('Setting AOM property on anchor tag', () => {
+    const URL = 'http://localhost:4567/anchor-aom-setter';
+    let element;
+
+    before(() => {
+        browser.url(URL);
+    });
+
+    it('should set AOM property without error', function () {
+        browser.click('button');
+        assert.deepEqual(browser.getText('.error-text'), 'no error');
+    });
+});

packages/lwc-integration/src/components/accessibility/test-anchor-aom-setter/anchor-aom-setter/anchor-aom-setter.html

@@ -0,0 +1,5 @@
+<template>
+    <a href="#">Anchor</a>
+    <button onclick={handleClick}>Click Me</button>
+    <div class="error-text">{errorText}</div>
+</template>

packages/lwc-integration/src/components/accessibility/test-anchor-aom-setter/anchor-aom-setter/anchor-aom-setter.js

@@ -0,0 +1,12 @@
+import { Element, track } from 'engine';
+
+export default class AnchorAOMSetter extends Element {
+    @track errorText = 'no error';
+    handleClick() {
+        try {
+            this.template.querySelector('a').ariaLabel = 'label';
+        } catch (e) {
+            this.errorText = e.message;
+        }
+    }
+}