From 35291dfde609d9b9a84fd25739bc61f22b0a34af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 31 Aug 2022 10:16:38 +0300
Subject: [PATCH] Fixed #2909 - Improve Toolbar implementation for
 Accessibility

---
 api-generator/components/toolbar.js | 10 ++++++++++
 src/components/toolbar/Toolbar.d.ts |  4 ++++
 src/components/toolbar/Toolbar.vue  | 10 ++++++++--
 src/views/toolbar/ToolbarDoc.vue    | 10 ++++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/toolbar.js b/api-generator/components/toolbar.js
index 96851ae87..a9484f8ef 100644
--- a/api-generator/components/toolbar.js
+++ b/api-generator/components/toolbar.js
@@ -1,3 +1,12 @@
+const ToolbarProps = [
+    {
+        name: "aria-labelledby",
+        type: "string",
+        default: "null",
+        description: "Defines a string value that labels an interactive element."
+    }
+];
+
 const ToolbarSlots = [
     {
         name: "start",
@@ -13,6 +22,7 @@ module.exports = {
     toolbar: {
         name: "Toolbar",
         description: "Toolbar is a grouping component for buttons and other content.",
+        props: ToolbarProps,
         slots: ToolbarSlots
     }
 };
diff --git a/src/components/toolbar/Toolbar.d.ts b/src/components/toolbar/Toolbar.d.ts
index d3a7e1991..19885b856 100755
--- a/src/components/toolbar/Toolbar.d.ts
+++ b/src/components/toolbar/Toolbar.d.ts
@@ -2,6 +2,10 @@ import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface ToolbarProps {
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    "aria-labelledby"?: string | undefined;
 }
 
 export interface ToolbarSlots {
diff --git a/src/components/toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
index 8fb5b2a1f..ac5afb4bf 100755
--- a/src/components/toolbar/Toolbar.vue
+++ b/src/components/toolbar/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-toolbar p-component" role="toolbar">
+    <div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby">
         <div class="p-toolbar-group-left">
             <slot name="start"></slot>
         </div>
@@ -11,7 +11,13 @@
 
 <script>
 export default {
-    name: 'Toolbar'
+    name: 'Toolbar',
+    props: {
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    }
 }
 </script>
 
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 8e04a494a..c4650fa32 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -82,6 +82,16 @@ import Toolbar from 'primevue/toolbar';
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+    <DevelopmentSection>
+        <h6>Screen Reader</h6>
+        <p>Toolbar uses <i>toolbar</i> role to the root element, <i>aria-orientation</i> is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like <i>aria-labelledby</i>
+            to define the element if required.</p>
+
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
+    </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>