fix: review

sbb-design-systems · Mar 28, 2024 · e26e72e · e26e72e
1 parent afa3080
commit e26e72e
Show file tree

Hide file tree

Showing 19 changed files with 434 additions and 124 deletions.
diff --git a/...plete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js b/...plete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
@@ -28,3 +28,51 @@ snapshots["sbb-autocomplete-grid-actions ShadowDom"] =
 `;
 /* end snapshot sbb-autocomplete-grid-actions ShadowDom */
 
+snapshots["sbb-autocomplete-grid-actions A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-actions A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-actions A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-actions A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-actions A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-actions A11y tree Safari */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
@@ -1,12 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 
 import type { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions';
 import '../autocomplete-grid';
 import '../autocomplete-grid-row';
-import '../autocomplete-grid-option';
 import './autocomplete-grid-actions';
 import '../autocomplete-grid-button';
 
@@ -17,7 +16,6 @@ describe('sbb-autocomplete-grid-actions', () => {
       await fixture(html`
         <sbb-autocomplete-grid origin="anchor">
           <sbb-autocomplete-grid-row>
-            <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
             <sbb-autocomplete-grid-actions>
               <sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>
             </sbb-autocomplete-grid-actions>
@@ -42,4 +40,10 @@ describe('sbb-autocomplete-grid-actions', () => {
       'sbb-autocomplete-grid-item-3x1x0',
     );
   });
+
+  testA11yTreeSnapshot(html`
+    <sbb-autocomplete-grid-actions>
+      <sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>
+    </sbb-autocomplete-grid-actions>
+  `);
 });
diff --git a/...omplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/...omplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -76,6 +76,22 @@ snapshots["sbb-autocomplete-grid-button renders disabled ShadowDom"] =
 `;
 /* end snapshot sbb-autocomplete-grid-button renders disabled ShadowDom */
 
+snapshots["sbb-autocomplete-grid-button renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */
+
 snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Chrome"] = 
 `<p>
   {
@@ -115,22 +131,6 @@ snapshots["sbb-autocomplete-grid-button renders negative without icon ShadowDom"
 `;
 /* end snapshot sbb-autocomplete-grid-button renders negative without icon ShadowDom */
 
-snapshots["sbb-autocomplete-grid-button renders A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "button",
-      "name": ""
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */
-
 snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Firefox"] = 
 `<p>
   {

diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -7,7 +7,6 @@ import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
 import '../autocomplete-grid';
 import '../autocomplete-grid-row';
-import '../autocomplete-grid-option';
 import '../autocomplete-grid-actions';
 import './autocomplete-grid-button';
 
@@ -19,7 +18,6 @@ describe('sbb-autocomplete-grid-button', () => {
         await fixture(html`
           <sbb-autocomplete-grid origin="anchor">
             <sbb-autocomplete-grid-row>
-              <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
               <sbb-autocomplete-grid-actions>
                 <sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>
               </sbb-autocomplete-grid-actions>
@@ -51,7 +49,6 @@ describe('sbb-autocomplete-grid-button', () => {
         await fixture(html`
           <sbb-autocomplete-grid origin="anchor">
             <sbb-autocomplete-grid-row>
-              <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
               <sbb-autocomplete-grid-actions>
                 <sbb-autocomplete-grid-button
                   disabled
@@ -91,7 +88,6 @@ describe('sbb-autocomplete-grid-button', () => {
             <input />
             <sbb-autocomplete-grid>
               <sbb-autocomplete-grid-row>
-                <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
                 <sbb-autocomplete-grid-actions>
                   <sbb-autocomplete-grid-button></sbb-autocomplete-grid-button>
                 </sbb-autocomplete-grid-actions>

diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -30,6 +30,14 @@ const buttonObserverConfig: MutationObserverInit = {
 export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniButtonBaseElement) {
   public static override styles: CSSResultGroup = style;
 
+  /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
+  public get option(): SbbAutocompleteGridOptionElement | null {
+    return (
+      this.closest('sbb-autocomplete-grid-row')?.querySelector('sbb-autocomplete-grid-option') ||
+      null
+    );
+  }
+
   /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
   @state() private _disabledFromGroup = false;
 
@@ -49,7 +57,7 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    const parentGroup = this.closest?.('sbb-autocomplete-grid-optgroup');
+    const parentGroup = this.closest('sbb-autocomplete-grid-optgroup');
     if (parentGroup) {
       this._disabledFromGroup = parentGroup.disabled;
     }
@@ -84,14 +92,6 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
     );
   }
 
-  /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
-  public get optionOnSameRow(): SbbAutocompleteGridOptionElement | null {
-    return (
-      this.closest?.('sbb-autocomplete-grid-row')?.querySelector('sbb-autocomplete-grid-option') ||
-      null
-    );
-  }
-
   protected override renderTemplate(): TemplateResult {
     setAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
     return super.renderTemplate();

diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -93,16 +93,16 @@ since the focus must always stay on the connected `<input>`.
 
 ## Properties
 
-| Name              | Attribute   | Privacy | Type                                       | Default    | Description                                                                                                                      |
-| ----------------- | ----------- | ------- | ------------------------------------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `optionOnSameRow` | -           | public  | `SbbAutocompleteGridOptionElement \| null` |            | Gets the SbbAutocompleteGridOptionElement on the same row of the button.                                                         |
-| `disabled`        | `disabled`  | public  | `boolean`                                  | `false`    | Whether the component is disabled.                                                                                               |
-| `negative`        | `negative`  | public  | `boolean`                                  | `false`    | Negative coloring variant flag.                                                                                                  |
-| `iconName`        | `icon-name` | public  | `string \| undefined`                      |            | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `type`            | `type`      | public  | `SbbButtonType`                            | `'button'` | The type attribute to use for the button.                                                                                        |
-| `name`            | `name`      | public  | `string`                                   |            | The name of the button element.                                                                                                  |
-| `value`           | `value`     | public  | `string`                                   |            | The value of the button element.                                                                                                 |
-| `form`            | `form`      | public  | `string \| undefined`                      |            | The <form> element to associate the button with.                                                                                 |
+| Name       | Attribute   | Privacy | Type                                       | Default    | Description                                                                                                                      |
+| ---------- | ----------- | ------- | ------------------------------------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `option`   | -           | public  | `SbbAutocompleteGridOptionElement \| null` |            | Gets the SbbAutocompleteGridOptionElement on the same row of the button.                                                         |
+| `disabled` | `disabled`  | public  | `boolean`                                  | `false`    | Whether the component is disabled.                                                                                               |
+| `negative` | `negative`  | public  | `boolean`                                  | `false`    | Negative coloring variant flag.                                                                                                  |
+| `iconName` | `icon-name` | public  | `string \| undefined`                      |            | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `type`     | `type`      | public  | `SbbButtonType`                            | `'button'` | The type attribute to use for the button.                                                                                        |
+| `name`     | `name`      | public  | `string`                                   |            | The name of the button element.                                                                                                  |
+| `value`    | `value`     | public  | `string`                                   |            | The value of the button element.                                                                                                 |
+| `form`     | `form`      | public  | `string \| undefined`                      |            | The <form> element to associate the button with.                                                                                 |
 
 ## Methods
 

diff --git a/...ete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js b/...ete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
@@ -66,6 +66,46 @@ snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox ShadowDom"] =
 `;
 /* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox ShadowDom */
 
+snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Option 1"
+    },
+    {
+      "role": "text",
+      "name": "Option 2"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Option 1"
+    },
+    {
+      "role": "text leaf",
+      "name": "Option 2"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Firefox */
+
 snapshots["sbb-autocomplete-grid-optgroup Safari Dom"] = 
 `<sbb-autocomplete-grid-optgroup label="Group">
   <sbb-autocomplete-grid-row
@@ -128,3 +168,47 @@ snapshots["sbb-autocomplete-grid-optgroup Safari ShadowDom"] =
 `;
 /* end snapshot sbb-autocomplete-grid-optgroup Safari ShadowDom */
 
+snapshots["sbb-autocomplete-grid-optgroup Safari A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Option 1"
+    },
+    {
+      "role": "text",
+      "name": "("
+    },
+    {
+      "role": "text",
+      "name": "Group"
+    },
+    {
+      "role": "text",
+      "name": ")"
+    },
+    {
+      "role": "text",
+      "name": "Option 2"
+    },
+    {
+      "role": "text",
+      "name": "("
+    },
+    {
+      "role": "text",
+      "name": "Group"
+    },
+    {
+      "role": "text",
+      "name": ")"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-optgroup Safari A11y tree Safari */
+
diff --git a/...omponents/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts b/...omponents/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
@@ -1,9 +1,10 @@
 import { expect } from '@open-wc/testing';
+import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 
 import { isSafari } from '../../core/dom';
 import { describeIf } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 
 import './autocomplete-grid-optgroup';
 import '../autocomplete-grid';
@@ -15,19 +16,20 @@ import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-opt
 
 describe('sbb-autocomplete-grid-optgroup', () => {
   let root: SbbAutocompleteGridOptgroupElement;
+  const opt: TemplateResult = html`
+    <sbb-autocomplete-grid-optgroup label="Group">
+      <sbb-autocomplete-grid-row>
+        <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
+      </sbb-autocomplete-grid-row>
+      <sbb-autocomplete-grid-row>
+        <sbb-autocomplete-grid-option value="2">Option 2</sbb-autocomplete-grid-option>
+      </sbb-autocomplete-grid-row>
+    </sbb-autocomplete-grid-optgroup>
+  `;
   beforeEach(async () => {
     root = (
       await fixture(html`
-        <sbb-autocomplete-grid origin="anchor">
-          <sbb-autocomplete-grid-optgroup label="Group">
-            <sbb-autocomplete-grid-row>
-              <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
-            </sbb-autocomplete-grid-row>
-            <sbb-autocomplete-grid-row>
-              <sbb-autocomplete-grid-option value="2">Option 2</sbb-autocomplete-grid-option>
-            </sbb-autocomplete-grid-row>
-          </sbb-autocomplete-grid-optgroup>
-        </sbb-autocomplete-grid>
+        <sbb-autocomplete-grid origin="anchor"> ${opt} </sbb-autocomplete-grid>
         <div id="anchor"></div>
       `)
     ).querySelector('sbb-autocomplete-grid-optgroup')!;
@@ -41,6 +43,8 @@ describe('sbb-autocomplete-grid-optgroup', () => {
     it('ShadowDom', async () => {
       await expect(root).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot(opt);
   });
 
   describeIf(isSafari(), 'Safari', async () => {
@@ -51,5 +55,7 @@ describe('sbb-autocomplete-grid-optgroup', () => {
     it('ShadowDom', async () => {
       await expect(root).shadowDom.to.be.equalSnapshot();
     });
+
+    testA11yTreeSnapshot(opt);
   });
 });
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -31,7 +31,7 @@ export class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
   }
 
   protected setAttributeFromParent(): void {
-    this.negative = !!this.closest?.(`:is(sbb-autocomplete-grid, sbb-form-field)[negative]`);
+    this.negative = !!this.closest(`:is(sbb-autocomplete-grid, sbb-form-field)[negative]`);
     this.toggleAttribute('data-negative', this.negative);
   }