Merge pull request #2976 from bahadirsofuoglu/Breadcrumb-accessibilit…

…y-improvment Breadcrumb accessibility improvment
primefaces · Sep 23, 2022 · 5ef0a1a · 5ef0a1a
2 parents 01d37c9 + e311d05
commit 5ef0a1a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
@@ -1,9 +1,9 @@
 <template>
-    <nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
+    <nav class="p-breadcrumb p-component" role="navigation">
         <ul>
             <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
             <template v-for="item of model" :key="item.label">
-                <li class="p-breadcrumb-chevron pi pi-chevron-right"></li>
+                <li class="p-breadcrumb-chevron pi pi-chevron-right" :aria-hidden="true"></li>
                 <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
             </template>
         </ul>

diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -2,16 +2,17 @@
     <li v-if="visible()" :class="containerClass(item)">
         <template v-if="!template">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                <a :href="href" :class="linkClass({ isActive, isExactActive })" @click="onClick($event, navigate)">
+                <a :href="href" :class="linkClass({ isActive, isExactActive })" @click="onClick($event, navigate)" :aria-current="isCurrentUrl()">
                     <span v-if="item.icon" :class="iconClass"></span>
                     <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url || '#'" :class="linkClass()" @click="onClick" :target="item.target">
+            <a v-else :href="item.url || '#'" :class="linkClass()" @click="onClick" :target="item.target" :aria-current="isCurrentUrl()">
                 <span v-if="item.icon" :class="iconClass"></span>
                 <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
+
         <component v-else :is="template" :item="item"></component>
     </li>
 </template>
@@ -57,6 +58,12 @@ export default {
         },
         label() {
             return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
+        },
+        isCurrentUrl() {
+            const { to, url } = this.item;
+            const lastPath = `/${window.location.href.split('/').pop()}`;
+
+            return to === lastPath || url === lastPath ? 'page' : false;
         }
     },
     computed: {

diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -150,6 +150,21 @@ export default {
 
         <h5>Dependencies</h5>
         <p>None.</p>
+
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>
+                Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
+                separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
+            </p>
+
+            <h6>Keyboard Support</h6>
+            <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
+        </DevelopmentSection>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
     </AppDoc>
 </template>
 
@@ -172,7 +187,7 @@ export default {
     data() {
         return {
             home: {
-                icon: 'pi pi-home', 
+                icon: 'pi pi-home',
                 to: '/',
             },
             items: [
@@ -203,7 +218,7 @@ import { ref } from 'vue';
 export default {
     setup() {
         const home = ref({
-            icon: 'pi pi-home', 
+            icon: 'pi pi-home',
             to: '/',
         });
         const items = ref([
@@ -235,7 +250,7 @@ export default {
         const App = {
             setup() {
                 const home = ref({
-                    icon: 'pi pi-home', 
+                    icon: 'pi pi-home',
                     to: '/',
                 });
                 const items = ref([