Merge pull request #154 from adaptlearning/issue/#2051

add ariaPinLabel & aria-haspopup="dialog"
adaptlearning · Jun 26, 2018 · c37236b · c37236b
2 parents e6074c8 + 6bf083c
commit c37236b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/properties.schema b/properties.schema
@@ -20,6 +20,14 @@
       "validators": [],
       "translatable": true
     },
+    "ariaPinLabel": {
+      "type": "string",
+      "required": true,
+      "default": "Selectable pin ",
+      "inputType": "Text",
+      "validators": [],
+      "translatable": true
+    },
     "popupPagination": {
       "type": "string",
       "required": true,

diff --git a/templates/hotgraphic.hbs b/templates/hotgraphic.hbs
@@ -6,7 +6,7 @@
       {{#if _useGraphicsAsPins}}
         <div class="hotgraphic-narrative">
           {{#each _items}}
-          <button class="base hotgraphic-graphic-pin component-item-text-color {{#if _isVisited}}visited{{/if}} hotgraphic-graphic-pin-{{@index}} {{#if _graphic._classes}}{{_graphic._classes}}{{/if}}" data-index="{{@index}}" style="top:{{{_top}}}%; left:{{{_left}}}%;" role="button" aria-label="Item {{numbers @index}}. {{title}}.{{#if _isVisited}} {{../../_globals._accessibility._ariaLabels.visited}}.{{/if}}">
+          <button class="base hotgraphic-graphic-pin component-item-text-color {{#if _isVisited}}visited{{/if}} hotgraphic-graphic-pin-{{@index}} {{#if _graphic._classes}}{{_graphic._classes}}{{/if}}" data-index="{{@index}}" style="top:{{{_top}}}%; left:{{{_left}}}%;" aria-haspopup="dialog" aria-label="{{../_globals._components._hotgraphic.ariaPinLabel}} {{numbers @index}}. {{title}}.{{#if _isVisited}} {{../_globals._accessibility._ariaLabels.visited}}.{{/if}}">
             <div class="hotgraphic-graphic-pin-image component-item-color item-{{@index}}" style="background-image: url({{_graphic.src}})"></div>
           </button>
           {{/each}}
@@ -17,7 +17,7 @@
           <div class="graphic-attribution">{{{_graphic.attribution}}}</div>
         {{/if}}
         {{#each _items}}
-          <button class="base hotgraphic-graphic-pin component-item-text-color {{#if _isVisited}}visited{{/if}}" data-index="{{@index}}" style="top:{{{_top}}}%; left:{{{_left}}}%;" role="button" aria-label="Item {{numbers @index}}. {{title}}.{{#if _isVisited}} {{../../_globals._accessibility._ariaLabels.visited}}.{{/if}}">
+          <button class="base hotgraphic-graphic-pin component-item-text-color {{#if _isVisited}}visited{{/if}}" data-index="{{@index}}" style="top:{{{_top}}}%; left:{{{_left}}}%;" aria-haspopup="dialog" aria-label="{{../_globals._components._hotgraphic.ariaPinLabel}} {{numbers @index}}. {{title}}.{{#if _isVisited}} {{../_globals._accessibility._ariaLabels.visited}}.{{/if}}">
             <div class="hotgraphic-graphic-pin-icon component-item-color icon icon-pin item-{{@index}}"></div>
           </button>
         {{/each}}