Update: Item count ARIA updates (fixes #291) (#292)

adaptlearning · Feb 7, 2024 · 3826047 · 3826047
1 parent d4241ec
commit 3826047
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (