fixed #2 added aria labels and navigation role

breadlesscode · Apr 8, 2018 · a983689 · a983689
1 parent 5e9f0c7
commit a983689
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 1 deletion.
diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml
@@ -11,6 +11,11 @@ Neos:
     fusion:
       autoInclude:
         Breadlesscode.Listable: true
+    userInterface:
+      translation:
+        autoInclude:
+          'Breadlesscode.Listable':
+            - '*'
 Breadlesscode:
   Listable:
     pagination:

diff --git a/Resources/Private/Fusion/Component/Pagination.fusion b/Resources/Private/Fusion/Component/Pagination.fusion
@@ -5,7 +5,8 @@ prototype(Breadlesscode.Listable:Pagination) < prototype(Neos.Fusion:Component)
     itemsPerPage = ''
     paginationConfig = ${ [] }
 
-    @process.wrapPagination = ${ '<ul class="pagination">' + value + '</ul>' }
+    @process.wrapPaginationUl = ${ '<ul class="pagination">' + value + '</ul>' }
+    @process.wrapPaginationNav = ${ '<nav role="navigation" aria-label="Pagination Navigation">' + value + '</nav>' }
     @if.hasOnlyOnePage = ${ this.totalCount > this.itemsPerPage }
 
     renderer = Neos.Fusion:Collection {
@@ -17,6 +18,8 @@ prototype(Breadlesscode.Listable:Pagination) < prototype(Neos.Fusion:Component)
             paginationConfig = ${ props.paginationConfig }
         }
         itemRenderer = Breadlesscode.Listable:PaginationItem {
+            page = ${ item.page }
+            isCurrent = ${ props.currentPage == item.page }
             uri = Neos.Neos:NodeUri {
                 node = ${ documentNode }
                 additionalParams = Neos.Fusion:RawArray {

diff --git a/Resources/Private/Fusion/Component/PaginationItem.fusion b/Resources/Private/Fusion/Component/PaginationItem.fusion
@@ -1,6 +1,8 @@
 prototype(Breadlesscode.Listable:PaginationItem) < prototype(Neos.Fusion:Component) {
     label = ${ false }
     uri = ${ false }
+    page = ${ false }
+    isCurrent = ${ false }
     typeClass = ${ '' }
     linkClass = 'page-link'
 
@@ -11,6 +13,12 @@ prototype(Breadlesscode.Listable:PaginationItem) < prototype(Neos.Fusion:Compone
             href = ${ props.uri }
             [email protected] = ${ props.uri ? true : false }
             class = ${ props.linkClass }
+
+            aria-label = ${ Translation.translate('Breadlesscode.Listable:Accessibility:item.label') + props.page }
+            [email protected] = ${ props.uri ? true : false }
+
+            aria-current= ${ "true" }
+            [email protected] = ${ props.isCurrent }
         }
 
         @process.itemWrap = Neos.Fusion:Tag {

diff --git a/Resources/Private/Translations/de/Accessibility.xlf b/Resources/Private/Translations/de/Accessibility.xlf
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+    <file original="" product-name="Breadlesscode.Listable" source-language="en" target-language="de" datatype="plaintext">
+        <body>
+            <trans-unit id="label" xml:space="preserve">
+                <source>Pagination Navigation</source>
+                <target xml:lang="de">Seitennavigation</target>
+            </trans-unit>
+            <trans-unit id="item.label" xml:space="preserve">
+                <source>Goto Page </source>
+                <target xml:lang="de">Gehe zu Seite </target>
+            </trans-unit>
+        </body>
+    </file>
+</xliff>
diff --git a/Resources/Private/Translations/en/Accessibility.xlf b/Resources/Private/Translations/en/Accessibility.xlf
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+    <file original="" product-name="Breadlesscode.Listable" source-language="en" datatype="plaintext">
+        <body>
+            <trans-unit id="label" xml:space="preserve">
+                <source>Pagination Navigation</source>
+            </trans-unit>
+            <trans-unit id="item.label" xml:space="preserve">
+                <source>Goto Page </source>
+            </trans-unit>
+        </body>
+    </file>
+</xliff>