Fixed #2909 - Improve Toolbar implementation for Accessibility

primefaces · Aug 31, 2022 · 35291df · 35291df
1 parent 92e9602
commit 35291df
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>