From 2ae6ed73cd4575411c5f20dbf1b2e01b3cfedc9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Sun, 20 Nov 2022 15:33:22 +0300
Subject: [PATCH 1/5] Improve dataView implementation for accessibility

---
 src/components/config/PrimeVue.js    | 11 +++++++-
 src/components/dataview/DataView.vue | 13 +++++++++-
 src/views/dataview/DataViewDoc.vue   | 38 +++++++++++++++++++++++++++-
 src/views/locale/LocaleDemo.vue      | 11 +++++++-
 4 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/src/components/config/PrimeVue.js b/src/components/config/PrimeVue.js
index 4feb47d8c1..0cd1b98ab9 100644
--- a/src/components/config/PrimeVue.js
+++ b/src/components/config/PrimeVue.js
@@ -81,7 +81,16 @@ const defaultOptions = {
             previous: 'Previous',
             next: 'Next',
             navigation: 'Navigation',
-            scrollTop: 'Scroll Top'
+            scrollTop: 'Scroll Top',
+            pageLabel: 'Page',
+            firstPageLabel: 'First Page',
+            lastPageLabel: 'Last Page',
+            nextPageLabel: 'Next Page',
+            rowsPerPageDropdownLabel: 'Rows per page',
+            previousPageLabel: 'Previous Page',
+            jumpToPageLabel: 'Jump to Page',
+            listView: 'List View',
+            gridView: 'Grid View'
         }
     },
     filterMatchModeOptions: {
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 1f243213e7..4551ab8e18 100755
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" :aria-label="getAriaLabel">
         <div v-if="$slots.header" class="p-dataview-header">
             <slot name="header"></slot>
         </div>
@@ -235,6 +235,17 @@ export default {
             } else {
                 return null;
             }
+        },
+        getAriaLabel() {
+            const ariaLabels = this.$primevue.config.locale.aria;
+
+            if (this.layout === 'list') {
+                return ariaLabels ? ariaLabels.listView : undefined;
+            } else if (this.layout === 'grid') {
+                return ariaLabels ? ariaLabels.gridView : undefined;
+            }
+
+            return null;
         }
     },
     components: {
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index b9e16afbe9..9ab25ad1ef 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -4,7 +4,7 @@
 
         <pre v-code.script><code>
 import DataView from 'primevue/dataview';
-				
+
 </code></pre>
 
         <h5>Import via CDN</h5>
@@ -468,6 +468,42 @@ export default {
             </table>
         </div>
 
+        <h5>Accessibility</h5>
+
+        <h6>Screen Reader</h6>
+        <p>
+            The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
+            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <Link href="/locale">locale</Link> API respectively.
+        </p>
+
+        <p>Refer to <Link href="/paginator">paginator</Link> accessibility documentation for the paginator of the component.</p>
+
+        <h6>Keyboard Support</h6>
+        <div className="doc-tablewrapper">
+            <table className="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the checked state of a button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
         <h5>Dependencies</h5>
         <p>PrimeFlex</p>
     </AppDoc>
diff --git a/src/views/locale/LocaleDemo.vue b/src/views/locale/LocaleDemo.vue
index 5a3e62af42..ccb31d5cfb 100644
--- a/src/views/locale/LocaleDemo.vue
+++ b/src/views/locale/LocaleDemo.vue
@@ -142,7 +142,16 @@ locale: {
         previous: 'Previous',
         next: 'Next',
         navigation: 'Navigation',
-        scrollTop: 'Scroll Top'
+        scrollTop: 'Scroll Top',
+        pageLabel: 'Page',
+        firstPageLabel: 'First Page',
+        lastPageLabel: 'Last Page',
+        nextPageLabel: 'Next Page',
+        rowsPerPageDropdownLabel: 'Rows per page',
+        previousPageLabel: 'Previous Page',
+        jumpToPageLabel: 'Jump to Page',
+        listView: 'List View',
+        gridView: 'Grid View',
     }
 }
 

From 8d4a01e29affbfa8adfa383a50a346e45296cdc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Sun, 20 Nov 2022 15:39:15 +0300
Subject: [PATCH 2/5] DataView unit test changes

---
 src/components/dataview/DataView.spec.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/dataview/DataView.spec.js b/src/components/dataview/DataView.spec.js
index 36c51c0faa..f824218e15 100644
--- a/src/components/dataview/DataView.spec.js
+++ b/src/components/dataview/DataView.spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import DataView from './DataView.vue';
-
+import PrimeVue from 'primevue/config';
 describe('DataView.vue', () => {
     it('should exist', () => {
         const wrapper = mount(DataView, {
@@ -71,6 +71,9 @@ describe('DataView.vue', () => {
                         </div>
                     </template>
                 `
+            },
+            global: {
+                plugins: [PrimeVue]
             }
         });
 

From 2e8752da7b43630a645efea347c5e1fbe46bd40c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 24 Nov 2022 14:05:51 +0300
Subject: [PATCH 3/5] Code review fixes

---
 src/components/dataview/DataView.spec.js          |  3 ++-
 src/components/dataview/DataView.vue              | 13 +------------
 .../DataViewLayoutOptions.spec.js                 | 15 +++++++++++++--
 .../DataViewLayoutOptions.vue                     | 10 ++++++++--
 src/views/dataview/DataViewDoc.vue                |  4 ++--
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/dataview/DataView.spec.js b/src/components/dataview/DataView.spec.js
index 1b06e3181f..8598d6039c 100644
--- a/src/components/dataview/DataView.spec.js
+++ b/src/components/dataview/DataView.spec.js
@@ -1,7 +1,8 @@
 import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
 import DataView from './DataView.vue';
-import PrimeVue from 'primevue/config';
+
+
 describe('DataView.vue', () => {
     it('should exist', () => {
         const wrapper = mount(DataView, {
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 4551ab8e18..1f243213e7 100755
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" :aria-label="getAriaLabel">
+    <div :class="containerClass">
         <div v-if="$slots.header" class="p-dataview-header">
             <slot name="header"></slot>
         </div>
@@ -235,17 +235,6 @@ export default {
             } else {
                 return null;
             }
-        },
-        getAriaLabel() {
-            const ariaLabels = this.$primevue.config.locale.aria;
-
-            if (this.layout === 'list') {
-                return ariaLabels ? ariaLabels.listView : undefined;
-            } else if (this.layout === 'grid') {
-                return ariaLabels ? ariaLabels.gridView : undefined;
-            }
-
-            return null;
         }
     },
     components: {
diff --git a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
index 628157fa9b..237a523a11 100644
--- a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
+++ b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
@@ -1,6 +1,17 @@
-import { mount } from '@vue/test-utils';
+import { mount,config } from '@vue/test-utils';
 import DataViewLayoutOptions from './DataViewLayoutOptions.vue';
-
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    listView: 'listView',
+                    gridView: 'gridView',
+                }
+            }
+        }
+    }
+};
 describe('DataViewLayoutOptions.vue', () => {
     it('should exist', async () => {
         const wrapper = mount(DataViewLayoutOptions, {
diff --git a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
index bceb4e2df9..e9a35404ff 100755
--- a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="p-dataview-layout-options p-selectbutton p-buttonset">
-        <button :class="buttonListClass" @click="changeLayout('list')" type="button">
+        <button role="group" :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button">
             <i class="pi pi-bars"></i>
         </button>
-        <button :class="buttonGridClass" @click="changeLayout('grid')" type="button">
+        <button role="group" :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button">
             <i class="pi pi-th-large"></i>
         </button>
     </div>
@@ -27,6 +27,12 @@ export default {
         },
         buttonGridClass() {
             return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'grid' }];
+        },
+        listViewAriaLabel() {
+            return this.$primevue.config.locale.aria.listView;
+        },
+        gridViewAriaLabel() {
+            return this.$primevue.config.locale.aria.gridView;
         }
     }
 };
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 9ab25ad1ef..7cfb0ea915 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -473,10 +473,10 @@ export default {
         <h6>Screen Reader</h6>
         <p>
             The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
-            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <Link href="/locale">locale</Link> API respectively.
+            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
         </p>
 
-        <p>Refer to <Link href="/paginator">paginator</Link> accessibility documentation for the paginator of the component.</p>
+        <p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
 
         <h6>Keyboard Support</h6>
         <div className="doc-tablewrapper">

From 10cc1bd4672091334cebebdde4c1c9d1a681e9ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 24 Nov 2022 14:08:34 +0300
Subject: [PATCH 4/5] format fixes

---
 src/components/dataview/DataView.spec.js                      | 4 ----
 .../dataviewlayoutoptions/DataViewLayoutOptions.spec.js       | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/dataview/DataView.spec.js b/src/components/dataview/DataView.spec.js
index 8598d6039c..67cafce266 100644
--- a/src/components/dataview/DataView.spec.js
+++ b/src/components/dataview/DataView.spec.js
@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
 import DataView from './DataView.vue';
 
-
 describe('DataView.vue', () => {
     it('should exist', () => {
         const wrapper = mount(DataView, {
@@ -76,9 +75,6 @@ describe('DataView.vue', () => {
                         </div>
                     </template>
                 `
-            },
-            global: {
-                plugins: [PrimeVue]
             }
         });
 
diff --git a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
index 237a523a11..bdbeb1a755 100644
--- a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
+++ b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
@@ -1,4 +1,4 @@
-import { mount,config } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import DataViewLayoutOptions from './DataViewLayoutOptions.vue';
 config.global.mocks = {
     $primevue: {
@@ -6,7 +6,7 @@ config.global.mocks = {
             locale: {
                 aria: {
                     listView: 'listView',
-                    gridView: 'gridView',
+                    gridView: 'gridView'
                 }
             }
         }

From 6a38f06ca7e012b04420b20711b937d581cc7fed 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: Thu, 24 Nov 2022 14:32:17 +0300
Subject: [PATCH 5/5] aria-pressed functionality added

---
 .../DataViewLayoutOptions.vue                 | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
index e9a35404ff..dc84ae6196 100755
--- a/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="p-dataview-layout-options p-selectbutton p-buttonset">
-        <button role="group" :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button">
+    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group">
+        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed">
             <i class="pi pi-bars"></i>
         </button>
-        <button role="group" :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button">
+        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed">
             <i class="pi pi-th-large"></i>
         </button>
     </div>
@@ -16,9 +16,23 @@ export default {
     props: {
         modelValue: String
     },
+    data() {
+        return {
+            isListButtonPressed: false,
+            isGridButtonPressed: false
+        };
+    },
     methods: {
         changeLayout(layout) {
             this.$emit('update:modelValue', layout);
+
+            if (layout === 'list') {
+                this.isListButtonPressed = true;
+                this.isGridButtonPressed = false;
+            } else if (layout === 'grid') {
+                this.isGridButtonPressed = true;
+                this.isListButtonPressed = false;
+            }
         }
     },
     computed: {
@@ -29,10 +43,10 @@ export default {
             return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'grid' }];
         },
         listViewAriaLabel() {
-            return this.$primevue.config.locale.aria.listView;
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listView : undefined;
         },
         gridViewAriaLabel() {
-            return this.$primevue.config.locale.aria.gridView;
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.gridView : undefined;
         }
     }
 };