From 8371cc6ba664c2e5dde03054b586de0071ea8e7e Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Fri, 5 Jan 2024 10:46:35 +0000 Subject: [PATCH 1/8] Update hotgraphicLayoutPins.jsx update itemCount ARIA --- templates/hotgraphicLayoutPins.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ( From 75e0adc0724465d132a31e142cb6aa5335140cae Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Fri, 5 Jan 2024 10:54:52 +0000 Subject: [PATCH 2/8] Update schema item count properties --- properties.schema | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/properties.schema b/properties.schema index 296f806..3ac4de5 100644 --- a/properties.schema +++ b/properties.schema @@ -14,9 +14,10 @@ }, "item": { "type": "string", - "title": "Item", + "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 } }, From 06357111ae4d679e08aee50f40c38772888efdcf Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Fri, 5 Jan 2024 11:00:08 +0000 Subject: [PATCH 3/8] Update schema item count properties --- schema/course.schema.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/schema/course.schema.json b/schema/course.schema.json index 5f96b3a..293defc 100644 --- a/schema/course.schema.json +++ b/schema/course.schema.json @@ -31,7 +31,8 @@ }, "item": { "type": "string", - "title": "Item", + "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 From 84fa76688bd9a09eb1be98be185d5da11ce43efb Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Fri, 5 Jan 2024 11:24:44 +0000 Subject: [PATCH 4/8] Update README accessibility --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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).
Back to Top
---------------------------- From 02a359c6f76810d086e8ad29db77c5b6c32a2733 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 15 Jan 2024 11:21:43 +0000 Subject: [PATCH 5/8] schema help curly braces added to match default. --- properties.schema | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/properties.schema b/properties.schema index 3ac4de5..92da7e7 100644 --- a/properties.schema +++ b/properties.schema @@ -17,7 +17,7 @@ "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.", + "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": { From 7602b739bff759e2a04d88d9468b26faedb75ae6 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 15 Jan 2024 11:23:32 +0000 Subject: [PATCH 6/8] schema description curly braces added to match default. --- schema/course.schema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/schema/course.schema.json b/schema/course.schema.json index 293defc..cf8a5b8 100644 --- a/schema/course.schema.json +++ b/schema/course.schema.json @@ -32,7 +32,7 @@ "item": { "type": "string", "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", + "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 From c873481740ad0263ec130460efd7aa452bb8ebd2 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 5 Feb 2024 15:02:58 +0000 Subject: [PATCH 7/8] Remove third curly braces from course schema item text ...as we're only expecting 'itemNumber' and 'totalItems' to return numbers back, double curly braces should be sufficient. --- schema/course.schema.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/schema/course.schema.json b/schema/course.schema.json index cf8a5b8..0089f73 100644 --- a/schema/course.schema.json +++ b/schema/course.schema.json @@ -32,8 +32,8 @@ "item": { "type": "string", "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}}}", + "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 } From a8865f77f916687675516a4d2f4a669beec4c6da Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 5 Feb 2024 15:04:14 +0000 Subject: [PATCH 8/8] Remove third curly braces from course schema item text ...as we're only expecting 'itemNumber' and 'totalItems' to return numbers back, double curly braces should be sufficient. --- properties.schema | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/properties.schema b/properties.schema index 92da7e7..7e807e7 100644 --- a/properties.schema +++ b/properties.schema @@ -15,9 +15,9 @@ "item": { "type": "string", "title": "Item count label", - "default": "Item {{{itemNumber}}} of {{{totalItems}}}", + "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.", + "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": {