fix: Switch to using d2l-link in object-property-item-link (#5183)

* Switch to using d2l-link in object-property-item-link * Remove redundant aria-label
BrightspaceUI · Nov 27, 2024 · 18d0cc2 · 18d0cc2
1 parent 47a4532
commit 18d0cc2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/components/object-property-list/demo/object-property-list.html b/components/object-property-list/demo/object-property-list.html
@@ -35,6 +35,7 @@ <h2>Object Property List: All item variants</h2>
 						<d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
 						<d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
 						<d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
+						<d2l-object-property-list-item-link target="_blank" text="Example new tab link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
 						<d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
 					</d2l-object-property-list>
 				</template>

diff --git a/components/object-property-list/object-property-list-item-link.js b/components/object-property-list/object-property-list-item-link.js
@@ -1,7 +1,7 @@
+import '../link/link.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { linkStyles } from '../link/link.js';
 import { ObjectPropertyListItem } from './object-property-list-item.js';
 
 /**
@@ -29,29 +29,20 @@ class ObjectPropertyListItemLink extends FocusMixin(ObjectPropertyListItem) {
 		};
 	}
 
-	static get styles() {
-		return [
-			...super.styles,
-			linkStyles
-		];
-	}
-
 	static get focusElementSelector() {
-		return '.d2l-link';
+		return 'd2l-link';
 	}
 
 	render() {
 		return html`
 			${this._renderIcon()}
 			${!this.skeleton ? html`
-				<a
+				<d2l-link
 					?download="${this.download}"
-					class="d2l-link"
 					href="${ifDefined(this.href)}"
-					target="${ifDefined(this.target)}"
-				>
+					target="${ifDefined(this.target)}">
 					${this._renderText()}
-				</a>
+				</d2l-link>
 			` : this._renderText()}
 			${this._renderSeparator()}
 		`;