From 8968c8275dcf0c145141b5808481461efe6d7fae Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Wed, 16 Oct 2019 14:23:34 +0200
Subject: [PATCH 1/6] adding accessibility attribute, acc improvements to be
 ready for acc testing

---
 ...tButtonIconAndContentExample.shorthand.tsx | 16 +++++++++-
 ...litButtonToggleButtonExample.shorthand.tsx | 31 +++++++++++++------
 .../Types/SplitButtonExample.shorthand.tsx    | 25 ++++++++++-----
 .../SplitButtonExamplePrimary.shorthand.tsx   | 27 +++++++++++-----
 .../Tree/Types/TreeExample.shorthand.tsx      |  2 +-
 .../Types/TreeExclusiveExample.shorthand.tsx  |  2 +-
 .../Usage/TreeAsListExample.shorthand.tsx     |  4 ++-
 .../TreeInitiallyOpenExample.shorthand.tsx    |  2 +-
 ...reeTitleCustomizationExample.shorthand.tsx |  4 ++-
 .../SplitButton/splitButtonBehavior.ts        |  2 ++
 .../src/behaviors/Tree/treeBehavior.ts        |  2 ++
 11 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
index e467e46ca8..1022ce4afe 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
@@ -26,7 +26,21 @@ const items = [
 ]
 
 const SplitButtonIconAndContentExampleShorthand = () => (
-  <SplitButton menu={items} button={items[0]} />
+  <div>
+    <SplitButton
+      menu={items}
+      button={{
+        content: items[0],
+        'aria-roledescription': 'splitbutton',
+        'aria-describedby': 'instruction-message-icon-content',
+      }}
+      toggleButton={{ 'aria-label': 'more options' }}
+    />
+    <span aria-hidden="true" id="instruction-message-icon-content" style={{ opacity: 0 }}>
+      {' '}
+      to open menu, press Alt + Arrrow Down{' '}
+    </span>
+  </div>
 )
 
 export default SplitButtonIconAndContentExampleShorthand
diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
index b06d465d66..4887f874b2 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
@@ -6,15 +6,28 @@ const SplitButtonExampleToggleButtonShorthand = () => {
   const [open, setOpen] = useBooleanKnob({ name: 'open' })
 
   return (
-    <SplitButton
-      menu={[
-        { key: 'group', content: 'New group message' },
-        { key: 'channel', content: 'New channel message' },
-      ]}
-      button="New conversation"
-      toggleButton={{ icon: open ? 'triangle-up' : 'triangle-down' }}
-      onOpenChange={(e, { open }) => setOpen(open)}
-    />
+    <div>
+      <SplitButton
+        menu={[
+          { key: 'group', content: 'New group message' },
+          { key: 'channel', content: 'New channel message' },
+        ]}
+        button={{
+          content: 'New conversation',
+          'aria-roledescription': 'splitbutton',
+          'aria-describedby': 'instruction-message-icon',
+        }}
+        toggleButton={{
+          icon: open ? 'triangle-up' : 'triangle-down',
+          'aria-label': 'more options',
+        }}
+        onOpenChange={(e, { open }) => setOpen(open)}
+      />
+      <span aria-hidden="true" id="instruction-message-icon" style={{ opacity: 0 }}>
+        {' '}
+        to open menu, press Alt + Arrrow Down{' '}
+      </span>
+    </div>
   )
 }
 
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
index 600b1201a2..9ed15f31cf 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
@@ -2,13 +2,24 @@ import * as React from 'react'
 import { SplitButton } from '@stardust-ui/react'
 
 const SplitButtonExampleShorthand = () => (
-  <SplitButton
-    menu={[
-      { key: 'group', content: 'New group message' },
-      { key: 'channel', content: 'New channel message' },
-    ]}
-    button="New conversation"
-  />
+  <div>
+    <SplitButton
+      menu={[
+        { key: 'group', content: 'New group message' },
+        { key: 'channel', content: 'New channel message' },
+      ]}
+      button={{
+        content: 'New conversation',
+        'aria-roledescription': 'splitbutton',
+        'aria-describedby': 'instruction-message',
+      }}
+      toggleButton={{ 'aria-label': 'more options' }}
+    />
+    <span aria-hidden="true" id="instruction-message" style={{ opacity: 0 }}>
+      {' '}
+      to open menu, press Alt + Arrrow Down
+    </span>
+  </div>
 )
 
 export default SplitButtonExampleShorthand
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
index 30097d1b6f..b8b02cd954 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
@@ -2,14 +2,25 @@ import * as React from 'react'
 import { SplitButton } from '@stardust-ui/react'
 
 const SplitButtonExamplePrimaryShorthand = () => (
-  <SplitButton
-    menu={[
-      { key: 'group', content: 'New group message' },
-      { key: 'channel', content: 'New channel message' },
-    ]}
-    button="New conversation"
-    primary
-  />
+  <div>
+    <SplitButton
+      menu={[
+        { key: 'group', content: 'New group message' },
+        { key: 'channel', content: 'New channel message' },
+      ]}
+      button={{
+        content: 'New conversation',
+        'aria-roledescription': 'splitbutton',
+        'aria-describedby': 'instruction-message-primary-button',
+      }}
+      primary
+      toggleButton={{ 'aria-label': 'more options' }}
+    />
+    <span aria-hidden="true" id="instruction-message-primary-button" style={{ opacity: 0 }}>
+      {' '}
+      to open menu, press Alt + Arrrow Down{' '}
+    </span>
+  </div>
 )
 
 export default SplitButtonExamplePrimaryShorthand
diff --git a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx b/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
index f226402d91..d29c4d6017 100644
--- a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
@@ -70,6 +70,6 @@ const items = [
   },
 ]
 
-const TreeExampleShorthand = () => <Tree items={items} />
+const TreeExampleShorthand = () => <Tree aria-labelledby="default" items={items} />
 
 export default TreeExampleShorthand
diff --git a/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx b/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
index ea4aa22d90..3e308e51fe 100644
--- a/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
@@ -40,6 +40,6 @@ const items = [
   },
 ]
 
-const TreeExclusiveExample = () => <Tree items={items} exclusive />
+const TreeExclusiveExample = () => <Tree aria-labelledby="exclusive" items={items} exclusive />
 
 export default TreeExclusiveExample
diff --git a/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
index 838bea0bbb..a09e8a4170 100644
--- a/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
@@ -70,6 +70,8 @@ const items = [
   },
 ]
 
-const TreeAsListExampleShorthand = () => <Tree items={items} accessibility={treeAsListBehavior} />
+const TreeAsListExampleShorthand = () => (
+  <Tree items={items} aria-labelledby="as-a-list" accessibility={treeAsListBehavior} />
+)
 
 export default TreeAsListExampleShorthand
diff --git a/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
index 008855f042..5683bbaf36 100644
--- a/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
@@ -71,7 +71,7 @@ const items = [
 ]
 
 const TreeInitiallyOpenExampleShorthand = () => (
-  <Tree items={items} defaultActiveItemIds={['1', '12', '2']} />
+  <Tree items={items} aria-labelledby="initially-open" defaultActiveItemIds={['1', '12', '2']} />
 )
 
 export default TreeInitiallyOpenExampleShorthand
diff --git a/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
index cc60148785..1752f10004 100644
--- a/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
@@ -37,6 +37,8 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
   </Component>
 )
 
-const TreeTitleCustomizationExample = () => <Tree items={items} renderItemTitle={titleRenderer} />
+const TreeTitleCustomizationExample = () => (
+  <Tree aria-labelledby="custom-title" items={items} renderItemTitle={titleRenderer} />
+)
 
 export default TreeTitleCustomizationExample
diff --git a/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts b/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts
index 95165c8398..31ee57bca1 100644
--- a/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts
+++ b/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts
@@ -7,6 +7,7 @@ import menuButtonBehavior from '../MenuButton/menuButtonBehavior'
 /**
  * @specification
  * Adds attribute 'tabIndex=-1' to 'toggleButton' slot.
+ * Adds attribute 'aria-haspopup=true' to 'toggleButton' slot.
  */
 const splitButtonBehavior: Accessibility = props => {
   const splitButtonMenuButtonBehavior = props => {
@@ -36,6 +37,7 @@ const splitButtonBehavior: Accessibility = props => {
       root: {},
       toggleButton: {
         tabIndex: -1,
+        'aria-haspopup': true,
       },
     },
     childBehaviors: {
diff --git a/packages/accessibility/src/behaviors/Tree/treeBehavior.ts b/packages/accessibility/src/behaviors/Tree/treeBehavior.ts
index ec7f3366fc..d8b8d283fa 100644
--- a/packages/accessibility/src/behaviors/Tree/treeBehavior.ts
+++ b/packages/accessibility/src/behaviors/Tree/treeBehavior.ts
@@ -7,6 +7,7 @@ import treeItemBehavior from './treeItemBehavior'
 /**
  * @specification
  * Adds role 'tree' to 'root' slot.
+ * Adds attribute 'tabIndex=-1' to 'root' slot.
  * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'root' slot.
  * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
@@ -18,6 +19,7 @@ const treeBehavior: Accessibility<TreeBehaviorProps> = props => {
       root: {
         role: 'tree',
         'aria-labelledby': props['aria-labelledby'],
+        tabIndex: -1,
       },
     },
     keyActions: {

From a5052f9a040f92cd0759c0ec42c89104aa3753ed Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Wed, 16 Oct 2019 14:48:35 +0200
Subject: [PATCH 2/6] adding onclick to simulate user experience

---
 .../Slots/SplitButtonIconAndContentExample.shorthand.tsx    | 6 ++++--
 .../Slots/SplitButtonToggleButtonExample.shorthand.tsx      | 2 +-
 .../SplitButton/Types/SplitButtonExample.shorthand.tsx      | 2 +-
 .../Types/SplitButtonExamplePrimary.shorthand.tsx           | 4 ++--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
index 1022ce4afe..ab78bfcd9b 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
@@ -30,14 +30,16 @@ const SplitButtonIconAndContentExampleShorthand = () => (
     <SplitButton
       menu={items}
       button={{
-        content: items[0],
+        content: items[0].content,
+        key: items[0].key,
+        icon: items[0].icon,
         'aria-roledescription': 'splitbutton',
         'aria-describedby': 'instruction-message-icon-content',
       }}
+      onMainButtonClick={() => alert('button was clicked')}
       toggleButton={{ 'aria-label': 'more options' }}
     />
     <span aria-hidden="true" id="instruction-message-icon-content" style={{ opacity: 0 }}>
-      {' '}
       to open menu, press Alt + Arrrow Down{' '}
     </span>
   </div>
diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
index 4887f874b2..fdfd83f67a 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
@@ -22,9 +22,9 @@ const SplitButtonExampleToggleButtonShorthand = () => {
           'aria-label': 'more options',
         }}
         onOpenChange={(e, { open }) => setOpen(open)}
+        onMainButtonClick={() => alert('button was clicked')}
       />
       <span aria-hidden="true" id="instruction-message-icon" style={{ opacity: 0 }}>
-        {' '}
         to open menu, press Alt + Arrrow Down{' '}
       </span>
     </div>
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
index 9ed15f31cf..8cfdf8b888 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
@@ -14,9 +14,9 @@ const SplitButtonExampleShorthand = () => (
         'aria-describedby': 'instruction-message',
       }}
       toggleButton={{ 'aria-label': 'more options' }}
+      onMainButtonClick={() => alert('button was clicked')}
     />
     <span aria-hidden="true" id="instruction-message" style={{ opacity: 0 }}>
-      {' '}
       to open menu, press Alt + Arrrow Down
     </span>
   </div>
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
index b8b02cd954..4f59bdf939 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
@@ -15,10 +15,10 @@ const SplitButtonExamplePrimaryShorthand = () => (
       }}
       primary
       toggleButton={{ 'aria-label': 'more options' }}
+      onMainButtonClick={() => alert('button was clicked')}
     />
     <span aria-hidden="true" id="instruction-message-primary-button" style={{ opacity: 0 }}>
-      {' '}
-      to open menu, press Alt + Arrrow Down{' '}
+      to open menu, press Alt + Arrrow Down
     </span>
   </div>
 )

From 8acb94f9a1605ae15523ededbc1933d639677a82 Mon Sep 17 00:00:00 2001
From: Milan Turon <milanturon@centrum.cz>
Date: Wed, 23 Oct 2019 18:56:40 +0200
Subject: [PATCH 3/6] Apply suggestions from code review

Co-Authored-By: Marija Najdova <mnajdova@gmail.com>
---
 .../Slots/SplitButtonIconAndContentExample.shorthand.tsx    | 6 +++---
 .../Slots/SplitButtonToggleButtonExample.shorthand.tsx      | 2 +-
 .../SplitButton/Types/SplitButtonExample.shorthand.tsx      | 2 +-
 .../Types/SplitButtonExamplePrimary.shorthand.tsx           | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
index ab78bfcd9b..c62f4110ba 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
@@ -26,7 +26,7 @@ const items = [
 ]
 
 const SplitButtonIconAndContentExampleShorthand = () => (
-  <div>
+  <>
     <SplitButton
       menu={items}
       button={{
@@ -40,9 +40,9 @@ const SplitButtonIconAndContentExampleShorthand = () => (
       toggleButton={{ 'aria-label': 'more options' }}
     />
     <span aria-hidden="true" id="instruction-message-icon-content" style={{ opacity: 0 }}>
-      to open menu, press Alt + Arrrow Down{' '}
+      to open menu, press Alt + Arrow Down
     </span>
-  </div>
+  </>
 )
 
 export default SplitButtonIconAndContentExampleShorthand
diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
index fdfd83f67a..c41b3f216a 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
@@ -25,7 +25,7 @@ const SplitButtonExampleToggleButtonShorthand = () => {
         onMainButtonClick={() => alert('button was clicked')}
       />
       <span aria-hidden="true" id="instruction-message-icon" style={{ opacity: 0 }}>
-        to open menu, press Alt + Arrrow Down{' '}
+        to open menu, press Alt + Arrow Down
       </span>
     </div>
   )
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
index 8cfdf8b888..5269e8e88f 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
@@ -17,7 +17,7 @@ const SplitButtonExampleShorthand = () => (
       onMainButtonClick={() => alert('button was clicked')}
     />
     <span aria-hidden="true" id="instruction-message" style={{ opacity: 0 }}>
-      to open menu, press Alt + Arrrow Down
+      to open menu, press Alt + Arrow Down
     </span>
   </div>
 )
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
index 4f59bdf939..3a562c309c 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
@@ -18,7 +18,7 @@ const SplitButtonExamplePrimaryShorthand = () => (
       onMainButtonClick={() => alert('button was clicked')}
     />
     <span aria-hidden="true" id="instruction-message-primary-button" style={{ opacity: 0 }}>
-      to open menu, press Alt + Arrrow Down
+      to open menu, press Alt + Arrow Down
     </span>
   </div>
 )

From b1f49259cc48b837cd7a64dc007ffaae1e170129 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Wed, 23 Oct 2019 19:09:41 +0200
Subject: [PATCH 4/6] change to aria-label

---
 .../HierarchicalTreeTitleCustomizationExample.shorthand.tsx | 2 +-
 .../components/Tree/Types/TreeExample.shorthand.tsx         | 2 +-
 .../Tree/Types/TreeExclusiveExample.shorthand.tsx           | 2 +-
 .../components/Tree/Usage/TreeAsListExample.shorthand.tsx   | 6 +++++-
 .../Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx       | 2 +-
 .../Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx  | 2 +-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
index dbec2a16cc..bbe985b1e2 100644
--- a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
+++ b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
@@ -38,7 +38,7 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
 )
 
 const TreeTitleCustomizationExample = () => (
-  <HierarchicalTree items={items} renderItemTitle={titleRenderer} />
+  <HierarchicalTree aria-label="Custom Title" items={items} renderItemTitle={titleRenderer} />
 )
 
 export default TreeTitleCustomizationExample
diff --git a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx b/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
index d29c4d6017..643305f208 100644
--- a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
@@ -70,6 +70,6 @@ const items = [
   },
 ]
 
-const TreeExampleShorthand = () => <Tree aria-labelledby="default" items={items} />
+const TreeExampleShorthand = () => <Tree aria-label="default" items={items} />
 
 export default TreeExampleShorthand
diff --git a/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx b/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
index 3e308e51fe..c0a9b49088 100644
--- a/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
@@ -40,6 +40,6 @@ const items = [
   },
 ]
 
-const TreeExclusiveExample = () => <Tree aria-labelledby="exclusive" items={items} exclusive />
+const TreeExclusiveExample = () => <Tree aria-label="exclusive" items={items} exclusive />
 
 export default TreeExclusiveExample
diff --git a/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
index a09e8a4170..d1d1986926 100644
--- a/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
@@ -71,7 +71,11 @@ const items = [
 ]
 
 const TreeAsListExampleShorthand = () => (
-  <Tree items={items} aria-labelledby="as-a-list" accessibility={treeAsListBehavior} />
+  <Tree
+    items={items}
+    aria-label="Tree with list accessibility roles"
+    accessibility={treeAsListBehavior}
+  />
 )
 
 export default TreeAsListExampleShorthand
diff --git a/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
index 5683bbaf36..ab7b693312 100644
--- a/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
@@ -71,7 +71,7 @@ const items = [
 ]
 
 const TreeInitiallyOpenExampleShorthand = () => (
-  <Tree items={items} aria-labelledby="initially-open" defaultActiveItemIds={['1', '12', '2']} />
+  <Tree items={items} aria-label="Initially open" defaultActiveItemIds={['1', '12', '2']} />
 )
 
 export default TreeInitiallyOpenExampleShorthand
diff --git a/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
index 1752f10004..e452c7df57 100644
--- a/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
@@ -38,7 +38,7 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
 )
 
 const TreeTitleCustomizationExample = () => (
-  <Tree aria-labelledby="custom-title" items={items} renderItemTitle={titleRenderer} />
+  <Tree aria-label="Custom title" items={items} renderItemTitle={titleRenderer} />
 )
 
 export default TreeTitleCustomizationExample

From 8b680a4aec44526c4e6f03fa85ff17d44b81c529 Mon Sep 17 00:00:00 2001
From: Milan Turon <milanturon@centrum.cz>
Date: Thu, 24 Oct 2019 17:58:25 +0200
Subject: [PATCH 5/6] Apply suggestions from code review 2

Co-Authored-By: Marija Najdova <mnajdova@gmail.com>
---
 .../Slots/SplitButtonToggleButtonExample.shorthand.tsx        | 4 ++--
 .../SplitButton/Types/SplitButtonExample.shorthand.tsx        | 4 ++--
 .../SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
index c41b3f216a..ece31db5b9 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
@@ -6,7 +6,7 @@ const SplitButtonExampleToggleButtonShorthand = () => {
   const [open, setOpen] = useBooleanKnob({ name: 'open' })
 
   return (
-    <div>
+    <>
       <SplitButton
         menu={[
           { key: 'group', content: 'New group message' },
@@ -27,7 +27,7 @@ const SplitButtonExampleToggleButtonShorthand = () => {
       <span aria-hidden="true" id="instruction-message-icon" style={{ opacity: 0 }}>
         to open menu, press Alt + Arrow Down
       </span>
-    </div>
+    </>
   )
 }
 
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
index 5269e8e88f..332cc631f2 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { SplitButton } from '@stardust-ui/react'
 
 const SplitButtonExampleShorthand = () => (
-  <div>
+  <>
     <SplitButton
       menu={[
         { key: 'group', content: 'New group message' },
@@ -19,7 +19,7 @@ const SplitButtonExampleShorthand = () => (
     <span aria-hidden="true" id="instruction-message" style={{ opacity: 0 }}>
       to open menu, press Alt + Arrow Down
     </span>
-  </div>
+  </>
 )
 
 export default SplitButtonExampleShorthand
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
index 3a562c309c..ca6159f095 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { SplitButton } from '@stardust-ui/react'
 
 const SplitButtonExamplePrimaryShorthand = () => (
-  <div>
+  <>
     <SplitButton
       menu={[
         { key: 'group', content: 'New group message' },
@@ -20,7 +20,7 @@ const SplitButtonExamplePrimaryShorthand = () => (
     <span aria-hidden="true" id="instruction-message-primary-button" style={{ opacity: 0 }}>
       to open menu, press Alt + Arrow Down
     </span>
-  </div>
+  </>
 )
 
 export default SplitButtonExamplePrimaryShorthand

From 8bbdc332bc59cd25b78a71957c288530b4f754d1 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Thu, 24 Oct 2019 18:41:24 +0200
Subject: [PATCH 6/6] changelog update

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07fa62df5e..748ff84c62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Show debug panel correctly for components with no owner @miroslavstastny ([#2055](https://github.com/stardust-ui/react/pull/2055))
 - Correctly handle empty key actions in RTL @miroslavstastny ([#2060](https://github.com/stardust-ui/react/pull/2060))
+- Accessibility improvements for `tree` and `splitButton` @kolaps33 ([#2032](https://github.com/stardust-ui/react/pull/2032))
 
 ### Features
 - Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))