diff --git a/d2l-navigation-link-image.js b/d2l-navigation-link-image.js index e8025b51..b399a7ec 100644 --- a/d2l-navigation-link-image.js +++ b/d2l-navigation-link-image.js @@ -51,12 +51,15 @@ class NavigationLinkImage extends FocusMixin(LitElement) { } render() { - return html` - - - ${this.text} - - `; + if (this.href) { + return html` + + + ${this.text} + + `; + } + return html`${this.text}`; } } diff --git a/demo/button-link.html b/demo/button-link.html index 08828548..4997e50e 100644 --- a/demo/button-link.html +++ b/demo/button-link.html @@ -69,6 +69,9 @@

d2l-navigation-link-image

href="https://www.example.org" src="./logo-image.png" text="Link Image Text"> + diff --git a/test/link.test.js b/test/link.test.js index 0f0bc044..1d2f35f2 100644 --- a/test/link.test.js +++ b/test/link.test.js @@ -86,10 +86,17 @@ describe('Links', () => { describe('d2l-navigation-link-image', () => { describe('accessibility', () => { - it('should pass all aXe tests', async() => { + + it('default', async() => { const el = await fixture(html``); await expect(el).to.be.accessible(); }); + + it('no href', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + }); describe('constructor', () => { diff --git a/test/link.visual-diff.html b/test/link.visual-diff.html index 2565ec50..e1a27356 100644 --- a/test/link.visual-diff.html +++ b/test/link.visual-diff.html @@ -36,5 +36,8 @@
+
+ +
diff --git a/test/link.visual-diff.js b/test/link.visual-diff.js index 25358bb6..0d34314f 100644 --- a/test/link.visual-diff.js +++ b/test/link.visual-diff.js @@ -29,7 +29,8 @@ describe('d2l-navigation-link', () => { { category: 'back', tests: ['normal', 'hover', 'focus'] }, { category: 'icon-text', tests: ['normal', 'hover', 'focus'] }, { category: 'icon-text-hidden', rectSelector: 'icon-text-hidden-container', tests: ['normal', 'hover', 'focus'] }, - { category: 'image', tests: ['normal', 'hover', 'focus'] } + { category: 'image', tests: ['normal', 'hover', 'focus'] }, + { category: 'image-no-href', tests: ['normal', 'hover'] } ].forEach((entry) => { describe(entry.category, () => { entry.tests.forEach((name) => { diff --git a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-hover.png b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-hover.png new file mode 100644 index 00000000..8e443687 Binary files /dev/null and b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-hover.png differ diff --git a/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-normal.png b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-normal.png new file mode 100644 index 00000000..8e443687 Binary files /dev/null and b/test/screenshots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-normal.png differ