fix: don't render anchor if no href (#159)

BrightspaceUILabs · Jul 12, 2022 · 16839c0 · 16839c0
1 parent 4e263c0
commit 16839c0
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 8 deletions.
diff --git a/d2l-navigation-link-image.js b/d2l-navigation-link-image.js
@@ -51,12 +51,15 @@ class NavigationLinkImage extends FocusMixin(LitElement) {
  }
 
  render() {
- return html`
- <a href="${this.href}" title="${this.text}">
- <span class="d2l-navigation-highlight-border"></span>
- <span class="d2l-navigation-link-image-container"><img src="${this.src}" alt="${this.text}"></span>
- </a>
- `;
+ if (this.href) {
+ return html`
+ <a href="${this.href}" title="${this.text}">
+ <span class="d2l-navigation-highlight-border"></span>
+ <span class="d2l-navigation-link-image-container"><img src="${this.src}" alt="${this.text}"></span>
+ </a>
+ `;
+ }
+ return html`<span class="d2l-navigation-link-image-container"><img src="${this.src}" alt="${this.text}" title="${this.text}"></span>`;
  }
 }
 

diff --git a/demo/button-link.html b/demo/button-link.html
@@ -69,6 +69,9 @@ <h2>d2l-navigation-link-image</h2>
  href="https://www.example.org"
  src="./logo-image.png"
  text="Link Image Text"></d2l-navigation-link-image>
+ <d2l-navigation-link-image
+ src="./logo-image.png"
+ text="Link Image Text"></d2l-navigation-link-image>
  </div>
  </d2l-demo-snippet>
 

diff --git 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`<d2l-navigation-link-image src="../demo/logo-image.png" href="https:/www.d2l.com" text="D2L"></d2l-navigation-link-image>`);
  await expect(el).to.be.accessible();
  });
+
+ it('no href', async() => {
+ const el = await fixture(html`<d2l-navigation-link-image src="../demo/logo-image.png" text="D2L"></d2l-navigation-link-image>`);
+ await expect(el).to.be.accessible();
+ });
+
  });
 
  describe('constructor', () => {

diff --git a/test/link.visual-diff.html b/test/link.visual-diff.html
@@ -36,5 +36,8 @@
  <div class="visual-diff">
  <d2l-navigation-link-image id="image" src="../demo/logo-image.png" href="https:/www.d2l.com" text="D2L"></d2l-navigation-link-image>
  </div>
+ <div class="visual-diff">
+ <d2l-navigation-link-image id="image-no-href" src="../demo/logo-image.png" text="D2L"></d2l-navigation-link-image>
+ </div>
  </body>
 </html>
diff --git 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/...shots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-hover.png b/...shots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-hover.png
diff --git a/...hots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-normal.png b/...hots/ci/golden/d2l-navigation-link/d2l-navigation-link-image-no-href-normal.png