Fix focus on link button in toolbar (#7639)

Author: deleonio

packages/components/src/components/toolbar/shadow.tsx

@@ -36,7 +36,7 @@ export class KolToolbar implements ToolbarAPI {
 		};
 
 		return '_href' in element ? (
-			<KolLinkWcTag {...element} {...props} ref={catchRef}></KolLinkWcTag>
+			<KolLinkWcTag {...element} {...props} ref={catchRef} _role="button"></KolLinkWcTag>
 		) : (
 			<KolButtonWcTag {...element} {...props} ref={catchRef}></KolButtonWcTag>
 		);

packages/components/src/components/toolbar/style.scss

@@ -1,6 +1,9 @@
 @use '../@shared/mixins' as *;
 @use '../../styles/global' as *;
 @use '../tooltip/style.scss' as *;
+@use '../@shared/kol-button-mixin' as *;
+
+@include kol-button-styles('kol-link');
 
 @layer kol-component {
 	.kol-toolbar {

packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`kol-toolbar should render with _label="Text" _items=[{"_label":"Button"
   <template shadowrootmode="open">
     <div aria-label="Text" class="kol-toolbar" role="toolbar">
       <kol-button-wc _label="Button" _tabindex="0" class="button kol-toolbar__item normal"></kol-button-wc>
-      <kol-link-wc _href="#" _label="Link" _tabindex="-1" class="button kol-toolbar__item normal"></kol-link-wc>
+      <kol-link-wc _href="#" _label="Link" _role="button" _tabindex="-1" class="button kol-toolbar__item normal"></kol-link-wc>
     </div>
   </template>
 </kol-toolbar>