From e3317ccffdd2e9abfd727ddaba2a5dfa05d63a59 Mon Sep 17 00:00:00 2001
From: Sarah Zhou <sarahzhou@Sarahs-MacBook-Pro-3.local>
Date: Thu, 7 Mar 2024 14:11:23 -0800
Subject: [PATCH] fix: allowing split view to have a custom aria label

---
 packages/split-view/src/SplitView.ts        |  5 +--
 packages/split-view/test/split-view.test.ts | 35 +++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/split-view/src/SplitView.ts b/packages/split-view/src/SplitView.ts
index 04776578aed..c39805e557b 100644
--- a/packages/split-view/src/SplitView.ts
+++ b/packages/split-view/src/SplitView.ts
@@ -184,8 +184,9 @@ export class SplitView extends SpectrumElement {
                         this.viewSize - this.splitterSize
                     )) as boolean,
         };
-        const label =
-            this.label || (this.resizable ? 'Resize the panels' : undefined);
+        const label = this.resizable
+            ? this.label || 'Resize the panels'
+            : undefined;
 
         return html`
             <slot
diff --git a/packages/split-view/test/split-view.test.ts b/packages/split-view/test/split-view.test.ts
index 8d36c4e2485..811f35f7524 100644
--- a/packages/split-view/test/split-view.test.ts
+++ b/packages/split-view/test/split-view.test.ts
@@ -972,6 +972,41 @@ describe('SplitView', () => {
         expect(testPanel).to.be.null;
     });
 
+    it('allows a custom label when resizable if specified', async () => {
+        const customLabel = 'Resizable Split View Custom Label';
+        const defaultLabel = 'Resize the panels';
+        let el = await fixture<SplitView>(
+            html`
+                <sp-split-view
+                    resizable
+                    label=${customLabel}
+                    primary-min="50"
+                    secondary-min="50"
+                >
+                    <div>First panel</div>
+                    <div>Second panel</div>
+                </sp-split-view>
+            `
+        );
+        expect(el.label).to.equal(customLabel);
+        let splitter = el.shadowRoot.querySelector(
+            '#splitter'
+        ) as HTMLDivElement;
+        expect(splitter.ariaLabel).to.equal(customLabel);
+
+        // If custom label not provided, should fall back to default label
+        el = await fixture<SplitView>(
+            html`
+                <sp-split-view resizable primary-min="50" secondary-min="50">
+                    <div>First panel</div>
+                    <div>Second panel</div>
+                </sp-split-view>
+            `
+        );
+        splitter = el.shadowRoot.querySelector('#splitter') as HTMLDivElement;
+        expect(splitter.ariaLabel).to.equal(defaultLabel);
+    });
+
     it('keeps the splitter pos when removing and re-adding a panel', async () => {
         let pointerId = -1;
         const el = await fixture<SplitView>(