From 8f9686cb11f1157d7fd0ad454b905f676136f5fc Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Thu, 15 Sep 2022 14:53:04 +0300
Subject: [PATCH 1/4] Breadcrumb accessibility improvment

---
 src/components/breadcrumb/Breadcrumb.vue     |  4 ++--
 src/components/breadcrumb/BreadcrumbItem.vue | 11 +++++++++-
 src/views/breadcrumb/BreadcrumbDoc.vue       | 21 +++++++++++++++++---
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index 17fd18152d..ec7ecb5a54 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -2,9 +2,9 @@
     <nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
         <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">
+            <template v-for="(item,i) of model" :key="item.label">
                 <li class="p-breadcrumb-chevron pi pi-chevron-right"></li>
-                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
+                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" :last-item="model.length === i + 1" />
             </template>
         </ul>
     </nav>
diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index 11761adaaf..e822542bd9 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -7,11 +7,16 @@
                     <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </router-link>
+            <div v-else-if="lastItem" aria-current="page">
+                <span v-if="item.icon" :class="iconClass"></span>
+                <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+            </div>
             <a v-else :href="item.url || '#'" :class="linkClass()" @click="onClick" :target="item.target">
                 <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>
@@ -22,7 +27,11 @@ export default {
     props: {
         item: null,
         template: null,
-        exact: null
+        exact: null,
+        lastItem: {
+            type: Boolean,
+            default: false
+        }
     },
     methods: {
         onClick(event, navigate) {
diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index b31b5d06a7..0c78c7a1b4 100755
--- 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([

From 1e344e24159eb0e4f8eedc6d74e89bc7c86f31cb Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Thu, 15 Sep 2022 15:01:16 +0300
Subject: [PATCH 2/4] Lint fix

---
 src/components/breadcrumb/Breadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index ec7ecb5a54..40bdc38b90 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -2,7 +2,7 @@
     <nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
         <ul>
             <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
-            <template v-for="(item,i) of model" :key="item.label">
+            <template v-for="(item, i) of model" :key="item.label">
                 <li class="p-breadcrumb-chevron pi pi-chevron-right"></li>
                 <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" :last-item="model.length === i + 1" />
             </template>

From f3ba9cc6740e15116d7bbfd6490e1fc07a6a9ba3 Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Mon, 19 Sep 2022 12:20:26 +0300
Subject: [PATCH 3/4] Changes for active tab

---
 src/components/breadcrumb/Breadcrumb.vue     |  8 ++++----
 src/components/breadcrumb/BreadcrumbItem.vue | 20 +++++++++-----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index 40bdc38b90..94dfbbb279 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -1,10 +1,10 @@
 <template>
-    <nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
+    <nav class="p-breadcrumb p-component" role="navigation" :aria-label="ariaLabel">
         <ul>
             <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
-            <template v-for="(item, i) of model" :key="item.label">
-                <li class="p-breadcrumb-chevron pi pi-chevron-right"></li>
-                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" :last-item="model.length === i + 1" />
+            <template v-for="item of model" :key="item.label">
+                <li class="p-breadcrumb-chevron pi pi-chevron-right" aria-hidden></li>
+                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
             </template>
         </ul>
     </nav>
diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index e822542bd9..4d6985a9f4 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -2,16 +2,12 @@
     <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>
-            <div v-else-if="lastItem" aria-current="page">
-                <span v-if="item.icon" :class="iconClass"></span>
-                <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
-            </div>
-            <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>
@@ -27,11 +23,7 @@ export default {
     props: {
         item: null,
         template: null,
-        exact: null,
-        lastItem: {
-            type: Boolean,
-            default: false
-        }
+        exact: null
     },
     methods: {
         onClick(event, navigate) {
@@ -66,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;
         }
     },
     computed: {

From e311d05a7dc897312d07994ef3919797b11d187f Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Mon, 19 Sep 2022 13:43:40 +0300
Subject: [PATCH 4/4] Label prop changes

---
 src/components/breadcrumb/Breadcrumb.vue     | 4 ++--
 src/components/breadcrumb/BreadcrumbItem.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index 94dfbbb279..126f220dda 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -1,9 +1,9 @@
 <template>
-    <nav class="p-breadcrumb p-component" role="navigation" :aria-label="ariaLabel">
+    <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" aria-hidden></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
index 4d6985a9f4..0ddb635dc3 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -63,7 +63,7 @@ export default {
             const { to, url } = this.item;
             const lastPath = `/${window.location.href.split('/').pop()}`;
 
-            return to === lastPath || url === lastPath;
+            return to === lastPath || url === lastPath ? 'page' : false;
         }
     },
     computed: {