[Navigation][Tabs][Carousel][Button] There's no possibility to add la…

…bels to the components (#683) - moves getLabel() -> getAccessibilityLabel(). - adds accessibility label for the Button component. - internationalises Breadcrumb label. - documents new accessibility label properties
adobe · Aug 30, 2019 · 5d5fb0f · 5d5fb0f
1 parent b85a40f
commit 5d5fb0f
Show file tree

Hide file tree

Showing 21 changed files with 83 additions and 33 deletions.
diff --git a/...es/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/ButtonImpl.java b/...es/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/ButtonImpl.java
@@ -64,6 +64,9 @@ public class ButtonImpl implements Button {
     @ValueMapValue(optional = true)
     private String icon;
 
+    @ValueMapValue(optional = true)
+    protected String accessibilityLabel;
+
     @Override
     public String getText() {
         return text;
@@ -87,6 +90,11 @@ public String getIcon() {
         return icon;
     }
 
+    @Override
+    public String getAccessibilityLabel() {
+        return accessibilityLabel;
+    }
+
     @NotNull
     @Override
     public String getExportedType() {

diff --git a/.../core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/CarouselImpl.java b/.../core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/CarouselImpl.java
@@ -41,7 +41,7 @@ public class CarouselImpl extends PanelContainerImpl implements Carousel {
     protected ValueMap properties;
 
     @ValueMapValue(optional = true)
-    protected String label;
+    protected String accessibilityLabel;
 
     protected boolean autoplay;
     protected Long delay;
@@ -70,8 +70,7 @@ public boolean getAutopauseDisabled() {
     }
 
     @Override
-    public String getLabel() {
-        return label;
+    public String getAccessibilityLabel() {
+        return accessibilityLabel;
     }
-
 }
diff --git a/...ore/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/NavigationImpl.java b/...ore/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/NavigationImpl.java
@@ -82,7 +82,7 @@ public class NavigationImpl implements Navigation {
     private LiveRelationshipManager relationshipManager;
 
     @ValueMapValue(optional = true)
-    private String label;
+    private String accessibilityLabel;
 
     private int structureDepth;
     private String navigationRootPage;
@@ -149,15 +149,15 @@ public List<NavigationItem> getItems() {
         return items;
     }
 
-    @NotNull
     @Override
-    public String getExportedType() {
-        return request.getResource().getResourceType();
+    public String getAccessibilityLabel() {
+        return accessibilityLabel;
     }
 
+    @NotNull
     @Override
-    public String getLabel() {
-        return label;
+    public String getExportedType() {
+        return request.getResource().getResourceType();
     }
 
     /**

diff --git a/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/TabsImpl.java b/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/TabsImpl.java
@@ -36,7 +36,7 @@ public class TabsImpl extends PanelContainerImpl implements Tabs {
     private String activeItem;
 
     @ValueMapValue(optional = true)
-    private String label;
+    private String accessibilityLabel;
 
     private String activeItemName;
 
@@ -52,7 +52,7 @@ public String getActiveItem() {
     }
 
     @Override
-    public String getLabel() {
-        return label;
+    public String getAccessibilityLabel() {
+        return accessibilityLabel;
     }
 }
diff --git a/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Button.java b/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Button.java
@@ -58,6 +58,16 @@ default String getIcon() {
         throw new UnsupportedOperationException();
     }
 
+    /**
+     * Returns an accessibility label for the button.
+     *
+     * @return an accessibility label for the button
+     * @since com.adobe.cq.wcm.core.components.models 12.9.0
+     */
+    default String getAccessibilityLabel() {
+        throw new UnsupportedOperationException();
+    }
+
     /**
      * @see ComponentExporter#getExportedType()
      * @since com.adobe.cq.wcm.core.components.models 12.8.0

diff --git a/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Carousel.java b/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Carousel.java
@@ -77,12 +77,12 @@ default boolean getAutopauseDisabled() {
     }
 
     /**
-     * Returns an accessible label that describes the carousel.
+     * Returns an accessibility label that describes the carousel.
      *
-     * @return an accessible label for carousel
+     * @return an accessibility label for the carousel
      * @since com.adobe.cq.wcm.core.components.models 12.9.0
      */
-    default String getLabel() {
+    default String getAccessibilityLabel() {
         throw new UnsupportedOperationException();
     }
 

diff --git a/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Navigation.java b/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Navigation.java
@@ -83,12 +83,12 @@ default String getExportedType() {
     }
 
     /**
-     * Retrieves an accessible label that describes the navigation.
+     * Retrieves an accessibility label that describes the navigation.
      *
-     * @return an accessible label for navigation
+     * @return an accessibility label for the navigation
      * @since com.adobe.cq.wcm.core.components.models 12.9.0
      */
-    default String getLabel() {
+    default String getAccessibilityLabel() {
         throw new UnsupportedOperationException();
     }
 

diff --git a/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Tabs.java b/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/models/Tabs.java
@@ -36,12 +36,12 @@ default String getActiveItem() {
     }
 
     /**
-     * Returns an accessible label that describes the tabs.
+     * Returns an accessibility label that describes the tabs.
      *
-     * @return an accessible label for tabs
+     * @return an accessibility label for tabs
      * @since com.adobe.cq.wcm.core.components.models 12.9.0
      */
-    default String getLabel() {
+    default String getAccessibilityLabel() {
         throw new UnsupportedOperationException();
     }
 }
diff --git a/...nt/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb/breadcrumb.html b/...nt/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb/breadcrumb.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <nav class="cmp-breadcrumb"
-     aria-label="Breadcrumb"
+     aria-label="${'Breadcrumb' @ i18n}"
      data-sly-use.breadcrumb="com.adobe.cq.wcm.core.components.models.Breadcrumb"
      data-sly-use.template="core/wcm/components/commons/v1/templates.html"
      data-sly-test="${breadcrumb.items.size > 0}">

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/README.md b/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/README.md
@@ -31,6 +31,7 @@ The following properties are written to JCR for the Button component and are exp
 1. `./jcr:title` - defines the button text
 2. `./link` - defines the button link
 3. `./icon` - defines an icon identifier for rendering an icon
+4. `./accessibilityLabel` - defines an accessibility label for the button
 
 ## BEM Description
 ```

diff --git a/...nt/src/content/jcr_root/apps/core/wcm/components/button/v1/button/_cq_dialog/.content.xml b/...nt/src/content/jcr_root/apps/core/wcm/components/button/v1/button/_cq_dialog/.content.xml
@@ -54,6 +54,34 @@
                             </columns>
                         </items>
                     </properties>
+                    <accessibility
+                        jcr:primaryType="nt:unstructured"
+                        jcr:title="Accessibility"
+                        sling:resourceType="granite/ui/components/coral/foundation/container"
+                        margin="{Boolean}true">
+                        <items jcr:primaryType="nt:unstructured">
+                            <columns
+                                jcr:primaryType="nt:unstructured"
+                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
+                                margin="{Boolean}true">
+                                <items jcr:primaryType="nt:unstructured">
+                                    <column
+                                        jcr:primaryType="nt:unstructured"
+                                        sling:resourceType="granite/ui/components/coral/foundation/container">
+                                        <items jcr:primaryType="nt:unstructured">
+                                            <accessibilityLabel
+                                                jcr:primaryType="nt:unstructured"
+                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
+                                                fieldDescription="Value of an aria-label attribute for the button. Useful if the visual button text is not very descriptive."
+                                                fieldLabel="Label"
+                                                name="./accessibilityLabel"
+                                                value=""/>
+                                        </items>
+                                    </column>
+                                </items>
+                            </columns>
+                        </items>
+                    </accessibility>
                 </items>
             </tabs>
         </items>

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/button.html b/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/button.html
@@ -17,7 +17,8 @@
         data-sly-use.iconTemplate="icon.html"
         data-sly-element="${button.link ? 'a' : 'button'}"
         class="cmp-button"
-        href="${button.link}">
+        href="${button.link}"
+        aria-label="${button.accessibilityLabel}">
     <sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly>
     <span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
 </button>
diff --git a/...nt/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/README.md b/...nt/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/README.md
@@ -47,6 +47,7 @@ The following properties are written to JCR for this Carousel component and are
 1. `./autoplay` - defines whether or not the carousel should automatically transition between slides.
 2. `./delay` - defines the delay (in milliseconds) when automatically transitioning between slides.
 3. `./autopauseDisabled` - defines whether or not automatic pause when hovering the carousel is disabled.
+4. `./accessibilityLabel` - defines an accessibility label for the carousel.
 
 The edit dialog also allows editing of Carousel items (adding, removing, naming, re-ordering).
 

diff --git a/...rc/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/_cq_dialog/.content.xml b/...rc/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/_cq_dialog/.content.xml
@@ -149,12 +149,12 @@
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/coral/foundation/container">
                                         <items jcr:primaryType="nt:unstructured">
-                                            <label
+                                            <accessibilityLabel
                                                 jcr:primaryType="nt:unstructured"
                                                 sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                 fieldDescription="Value of an aria-label attribute for the carousel, which describes the carousel content."
                                                 fieldLabel="Label"
-                                                name="./label"
+                                                name="./accessibilityLabel"
                                                 value=""/>
                                         </items>
                                     </column>

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/carousel.html b/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel/carousel.html
@@ -17,7 +17,7 @@
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      class="cmp-carousel"
      role="group"
-     aria-label="${carousel.label}"
+     aria-label="${carousel.accessibilityLabel}"
      aria-roledescription="carousel"
      data-cmp-is="carousel"
      data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"

diff --git a/...rc/content/jcr_root/apps/core/wcm/components/navigation/v1/navigation/README.md b/...rc/content/jcr_root/apps/core/wcm/components/navigation/v1/navigation/README.md
@@ -42,6 +42,7 @@ The following properties are written to JCR for the Navigation component and are
 2. `./skipNavigationRoot` - if `true`, excludes the navigation root in the resulting tree, including its descendants only.
 3. `./collectAllPages` - if `true`, collects all pages that are descendants of the `./navigationRoot`. Overrides `./structureDepth`.
 4. `./structureDepth` - the depth of the navigation structure, relative to the navigation root.
+5. `./accessibilityLabel` - defines an accessibility label for the navigation.
 
 ## Client Libraries
 The component provides a `core.wcm.components.navigation.v1.editor` editor client library category that includes

diff --git a/...ontent/jcr_root/apps/core/wcm/components/navigation/v1/navigation/_cq_dialog/.content.xml b/...ontent/jcr_root/apps/core/wcm/components/navigation/v1/navigation/_cq_dialog/.content.xml
@@ -107,12 +107,12 @@
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/coral/foundation/container">
                                         <items jcr:primaryType="nt:unstructured">
-                                            <label
+                                            <accessibilityLabel
                                                 jcr:primaryType="nt:unstructured"
                                                 sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                 fieldDescription="Value of an aria-label attribute for the navigation. Should be added if there is more than one navigation on the page."
                                                 fieldLabel="Label"
-                                                name="./label"
+                                                name="./accessibilityLabel"
                                                 value=""/>
                                         </items>
                                     </column>

diff --git a/...nt/src/content/jcr_root/apps/core/wcm/components/navigation/v1/navigation/navigation.html b/...nt/src/content/jcr_root/apps/core/wcm/components/navigation/v1/navigation/navigation.html
@@ -21,6 +21,6 @@
      data-sly-test.hasContent="${navigation.items.size > 0}"
      data-sly-use.groupTemplate="group.html"
      data-sly-call="${groupTemplate.group @ items=navigation.items}"
-     aria-label="${navigation.label}">
+     aria-label="${navigation.accessibilityLabel}">
 </nav>
 <sly data-sly-call="${template.placeholder @ isEmpty=!hasContent, classAppend='cmp-navigation'}"></sly>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/README.md b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/README.md
@@ -34,6 +34,7 @@ The component policy dialog allows definition of allowed components for the Tabs
 The following properties are written to JCR for this Tabs component and are expected to be available as `Resource` properties:
 
 1. `./activeItem` - defines the name of the item that is active by default.
+2. `./accessibilityLabel` - defines an accessibility label for the tabs.
 
 The edit dialog also allows editing of Tabs items (adding, removing, naming, re-ordering).
 

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/_cq_dialog/.content.xml b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/_cq_dialog/.content.xml
@@ -116,12 +116,12 @@
                                         jcr:primaryType="nt:unstructured"
                                         sling:resourceType="granite/ui/components/coral/foundation/container">
                                         <items jcr:primaryType="nt:unstructured">
-                                            <label
+                                            <accessibilityLabel
                                                 jcr:primaryType="nt:unstructured"
                                                 sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                 fieldDescription="Value of an aria-label attribute, which describes the purpose of the set of tabs."
                                                 fieldLabel="Label"
-                                                name="./label"
+                                                name="./accessibilityLabel"
                                                 value=""/>
                                         </items>
                                     </column>

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/tabs.html b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/tabs.html
@@ -21,7 +21,7 @@
         data-sly-list.tab="${tabs.items}"
         role="tablist"
         class="cmp-tabs__tablist"
-        aria-label="${tabs.label}"
+        aria-label="${tabs.accessibilityLabel}"
         aria-multiselectable="false">
         <sly data-sly-test.isActive="${tab.name == tabs.activeItem}"/>
         <li role="tab"