From dc981b560cf1ad51987e6a58f82d6b4e85e2e00e Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Wed, 11 Oct 2023 17:24:40 +0200
Subject: [PATCH] fix: resolve attributes function not handling states
 correctly (#2064)

* fix: resolve attributes function not handling states correctly
---
 src/components/sbb-button/sbb-button.spec.ts             | 7 +++----
 src/components/sbb-link/sbb-link.spec.ts                 | 2 --
 src/components/sbb-menu-action/sbb-menu-action.spec.ts   | 4 ++--
 src/components/sbb-toggle-check/sbb-toggle-check.spec.ts | 1 -
 src/global/interfaces/link-button-properties.ts          | 4 +++-
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/sbb-button/sbb-button.spec.ts b/src/components/sbb-button/sbb-button.spec.ts
index e88826c15b..c3f97f8d23 100644
--- a/src/components/sbb-button/sbb-button.spec.ts
+++ b/src/components/sbb-button/sbb-button.spec.ts
@@ -28,7 +28,7 @@ describe('sbb-button', () => {
         disabled
         aria-disabled="true"
         name="name"
-        value="value"
+        value="value"     
         form="formid"
         role="button"
         dir="ltr"
@@ -165,8 +165,7 @@ describe('sbb-button', () => {
     expect(root).to.have.attribute('data-icon-only');
   });
 
-  // TODO-Migr: enable this test after the FormField migration
-  it.skip('should render form field button variant when inside of a form field', async () => {
+  it('should render form field button variant when inside of a form field', async () => {
     const root = await fixture(
       html` <sbb-form-field>
         <input />
@@ -174,6 +173,6 @@ describe('sbb-button', () => {
       </sbb-form-field>`,
     );
 
-    expect(root).to.have.attribute('data-icon-small');
+    expect(root.querySelector('sbb-button')).to.have.attribute('data-icon-small');
   });
 });
diff --git a/src/components/sbb-link/sbb-link.spec.ts b/src/components/sbb-link/sbb-link.spec.ts
index 37e3ad536d..5583ed0283 100644
--- a/src/components/sbb-link/sbb-link.spec.ts
+++ b/src/components/sbb-link/sbb-link.spec.ts
@@ -26,7 +26,6 @@ describe('sbb-link', () => {
         tabindex="0"
         dir="ltr"
       >
-        
         Travelcards &amp; tickets.
       </sbb-link>
     `);
@@ -73,7 +72,6 @@ describe('sbb-link', () => {
         aria-disabled="true"
         dir="ltr"
       >
-        
         <sbb-icon name="chevron-small-right-small" slot="icon" role="img" aria-hidden="true" data-namespace="default"></sbb-icon>
         Travelcards &amp; tickets.
       </sbb-link>
diff --git a/src/components/sbb-menu-action/sbb-menu-action.spec.ts b/src/components/sbb-menu-action/sbb-menu-action.spec.ts
index 8402eaba37..277a73d11d 100644
--- a/src/components/sbb-menu-action/sbb-menu-action.spec.ts
+++ b/src/components/sbb-menu-action/sbb-menu-action.spec.ts
@@ -12,7 +12,7 @@ describe('sbb-menu-action', () => {
 
     expect(root).dom.to.be.equal(
       `
-        <sbb-menu-action form="formid" name="name" type="submit" role="button" tabindex="0" dir="ltr">
+        <sbb-menu-action  form="formid" name="name" type="submit" role="button" tabindex="0" dir="ltr">
           <span>Action</span>
         </sbb-menu-action>
       `,
@@ -47,7 +47,7 @@ describe('sbb-menu-action', () => {
 
     expect(root).dom.to.be.equal(
       `
-        <sbb-menu-action amount="123456" icon-name="menu-small" href="https://github.com/lyne-design-system/lyne-components" target="_blank" role="link" tabindex="0" dir="ltr">
+        <sbb-menu-action  amount="123456" icon-name="menu-small" href="https://github.com/lyne-design-system/lyne-components" target="_blank" role="link" tabindex="0" dir="ltr">
           <span>Action</span>
         </sbb-menu-action>
       `,
diff --git a/src/components/sbb-toggle-check/sbb-toggle-check.spec.ts b/src/components/sbb-toggle-check/sbb-toggle-check.spec.ts
index 0198e6ae68..f91ee4b300 100644
--- a/src/components/sbb-toggle-check/sbb-toggle-check.spec.ts
+++ b/src/components/sbb-toggle-check/sbb-toggle-check.spec.ts
@@ -73,7 +73,6 @@ describe('sbb-toggle-check', () => {
         expect(root).dom.to.be.equal(
           `
           <sbb-toggle-check size="s" aria-checked="true" aria-disabled="false" aria-required="false" checked label-position="after" role="checkbox" tabindex="0">
-            
           </sbb-toggle-check>
         `,
         );
diff --git a/src/global/interfaces/link-button-properties.ts b/src/global/interfaces/link-button-properties.ts
index 4ea7c27259..186accdb35 100644
--- a/src/global/interfaces/link-button-properties.ts
+++ b/src/global/interfaces/link-button-properties.ts
@@ -113,7 +113,9 @@ function getLinkAttributeList(linkProperties: LinkProperties): Record<string, st
 function hostProperties(role: string, disabled: boolean): Record<string, string> {
   return Object.assign(
     { role, dir: getDocumentWritingMode() },
-    disabled ? { 'aria-disabled': 'true' } : { tabIndex: '0' },
+    disabled
+      ? { 'aria-disabled': 'true', tabIndex: null }
+      : { 'aria-disabled': null, tabIndex: '0' },
   );
 }