From 3826047c7579b9d3ed8e900994d5cb3a340aded0 Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:44:40 +0000
Subject: [PATCH] Update: Item count ARIA updates (fixes #291) (#292)

---
 README.md                          | 6 +++++-
 properties.schema                  | 7 ++++---
 schema/course.schema.json          | 7 ++++---
 templates/hotgraphicLayoutPins.jsx | 2 +-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index e66d17d..eadcdd9 100644
--- a/README.md
+++ b/README.md
@@ -156,7 +156,11 @@ File name (including path) of the image. Path should be relative to the `src` fo
 The alternative text for this image. Assign [alt text](https://github.com/adaptlearning/adapt_framework/wiki/Providing-good-alt-text) to images that convey course content only.
 
 ## Accessibility
-**Hot Graphic** has two elements assigned a label using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion** and **popupPagination**. These labels are not visible elements. They are utilized by assistive technology such as screen readers. Should the label texts need to be customised, they can be found within the **globals** object in [*properties.schema*](https://github.com/adaptlearning/adapt-contrib-hotgraphic/blob/master/properties.schema).
+**Hot Graphic** has been assigned a descriptive label using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**.
+
+Other descriptive labels are used to provide context of the previous, current and next item. The following attributes are used to provide this functionality: **item**, **previous** and **next**.
+
+These labels are not visible elements. They are utilized by assistive technology (such as screen readers). Should any of these labels need to be customised or translated, they can be found within the **globals** object in [*properties.schema*](https://github.com/adaptlearning/adapt-contrib-hotgraphic/blob/master/properties.schema) (or Project settings > Globals in the Adapt Authoring Tool).
 <div float align=right><a href="#top">Back to Top</a></div>
 
 ----------------------------
diff --git a/properties.schema b/properties.schema
index 296f806..7e807e7 100644
--- a/properties.schema
+++ b/properties.schema
@@ -14,9 +14,10 @@
     },
     "item": {
       "type": "string",
-      "title": "Item",
-      "default": "Item {{{itemNumber}}} of {{{totalItems}}}",
+      "title": "Item count label",
+      "default": "Item {{itemNumber}} of {{totalItems}}",
       "inputType": "Text",
+      "help": "This is the aria label for each item. Use {{itemNumber}} and {{totalItems}} in your text to tell the user which item they are viewing and how many items there are in total.",
       "translatable": true
     },
     "previous": {
@@ -39,7 +40,7 @@
       "default": "{{itemNumber}} / {{totalItems}}",
       "inputType": "Text",
       "validators": [],
-      "help": "This is the aria label for each item. Use {{itemNumber}} and {{totalItems}} in your text to tell the user which item they are viewing and how many items there are in total.",
+      "help": "This is the item count displayed in the popup. Use {{itemNumber}} and {{totalItems}} in your text to tell the user which item they are viewing and how many items there are in total.",
       "translatable": true
     }
   },
diff --git a/schema/course.schema.json b/schema/course.schema.json
index 5f96b3a..0089f73 100644
--- a/schema/course.schema.json
+++ b/schema/course.schema.json
@@ -31,8 +31,9 @@
                     },
                     "item": {
                       "type": "string",
-                      "title": "Item",
-                      "default": "Item {{{itemNumber}}} of {{{totalItems}}}",
+                      "title": "Item count label",
+                      "description": "This is the aria label for each item. Use {{itemNumber}} and {{totalItems}} in your text to tell the user which item they are viewing and how many items there are in total",
+                      "default": "Item {{itemNumber}} of {{totalItems}}",
                       "_adapt": {
                         "translatable": true
                       }
@@ -56,7 +57,7 @@
                     "popupPagination": {
                       "type": "string",
                       "title": "Popup pagination",
-                      "description": "This is the aria label for each item. Use {{itemNumber}} and {{totalItems}} in your text to tell the user which item they are viewing and how many items there are in total",
+                      "description": "This is the item count displayed in the popup. Use {{itemNumber}} and {{totalItems}} in your text to tell the user which item they are viewing and how many items there are in total",
                       "default": "{{itemNumber}} / {{totalItems}}",
                       "_adapt": {
                         "translatable": true
diff --git a/templates/hotgraphicLayoutPins.jsx b/templates/hotgraphicLayoutPins.jsx
index dba5b3c..ed8ed83 100644
--- a/templates/hotgraphicLayoutPins.jsx
+++ b/templates/hotgraphicLayoutPins.jsx
@@ -40,7 +40,7 @@ export default function HotgraphicLayoutPins(props) {
           const visited = _isVisited ? visitedLabel?.trim?.() + '. ' : '';
           const numbered = _useNumberedPins ? (index + 1) + '. ' : '';
           const itemTitle = (_pin.alt || title)?.trim?.() + '. ';
-          const itemCount = compile(globals._components?._hotgraphic?.popupPagination || '', { itemNumber: _index + 1, totalItems: _items.length });
+          const itemCount = compile(globals._components?._hotgraphic?.item || '', { itemNumber: _index + 1, totalItems: _items.length });
           const ariaLabel = `${visited}${numbered}${itemTitle}${itemCount}`;
 
           return (