Fix: Header template does not work (fixes #99)

README.md

@@ -34,9 +34,15 @@ The attributes listed below are used in *course.json* to configure **Resources**
 
 >**\_drawerOrder** (number): Determines the order in which this extension appears as a drawer item. Acceptable values are numbers.
 
->**title** (string): This text is displayed (along with the **description**) in the [Drawer](https://github.com/adaptlearning/adapt_framework/wiki/Core-modules#drawer) as part of a button that gives access to the resources.
+>**title** (string): This text is displayed (along with the **description**) in the [Drawer](https://github.com/adaptlearning/adapt_framework/wiki/Core-modules#drawer) as part of a button that gives access to the resources. This property only shows when more than one extension is using the drawer.
 
->**description** (string): This text is displayed (along with the **title**) in the [Drawer](https://github.com/adaptlearning/adapt_framework/wiki/Core-modules#drawer) as part of a button that gives access to the resources.
+>**description** (string): This text is displayed (along with the **title**) in the [Drawer](https://github.com/adaptlearning/adapt_framework/wiki/Core-modules#drawer) as part of a button that gives access to the resources. This property only shows when more than one extension is using the drawer.
+
+>**displayTitle** (string): The title for the resources which displays at the top of the resources drawer.
+
+>**body** (string): The body text for the resources which displays at the top of the resources drawer.
+
+>**instruction** (string): The instruction text for the resources which displays at the top of the resources drawer.
 
 >**\_filterButtons** (object):  This attribute group maintains the labels for the four buttons that filter resources by type. It contains values for **all**, **document**, **media**, and **link**.
 
@@ -81,8 +87,8 @@ The attributes listed below are used in *course.json* to configure **Resources**
 No known limitations.
 
 ----------------------------
-<a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="Adapt Learning logo" align="right"></a>  
-**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-resources/graphs/contributors)  
-**Accessibility support:** WAI AA  
-**RTL support:** Yes  
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera  
+<a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="Adapt Learning logo" align="right"></a>
+**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-resources/graphs/contributors)<br>
+**Accessibility support:** WAI AA<br>
+**RTL support:** Yes<br>
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera<br>

example.json

@@ -4,6 +4,9 @@
         "_drawerOrder": 1,
         "title": "Resources",
         "description": "Select here to view resources for this course",
+        "displayTitle": "",
+        "body": "",
+        "instruction": "",
         "_filterButtons": {
             "all": "All",
             "document": "PDF",
@@ -71,3 +74,11 @@
             }
         ]
     }
+
+    // Accessibility supported courses require ARIA instruction
+    // apply to _globals in course.json
+    // --------------------------------------------------
+    "_resources": {
+        "ariaRegion": "",
+        "resources": "Resources"
+    }

js/ResourcesView.js

@@ -22,6 +22,7 @@ export default class ResourcesView extends Backbone.View {
     ReactDOM.render(<templates.resources {...data} />, this.el);
 
     _.defer(() => {
+      Adapt.trigger('view:render', this);
       this.listenTo(Adapt, 'drawer:closed', this.remove);
     });
 

js/adapt-contrib-resources.js

@@ -23,6 +23,13 @@ class Resources extends Backbone.Controller {
 
     drawer.addItem(drawerObject, 'resources:showResources');
 
+    Object.assign(courseResources, {
+      _isA11yComponentDescriptionEnabled: true,
+      _id: 'resources',
+      _extension: 'resources',
+      _ariaLevel: 1
+    });
+
     this.setupResources(courseResources);
   }
 

properties.schema

@@ -4,6 +4,14 @@
   "id": "http://jsonschema.net",
   "required": false,
   "globals": {
+    "ariaRegion": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "inputType": "Text",
+      "validators": [],
+      "translatable": true
+    },
     "resources": {
       "type": "string",
       "required": true,
@@ -54,6 +62,7 @@
                   "title": "",
                   "inputType": "Text",
                   "validators": ["required"],
+                  "help": "The title for the resources button which displays when more than one extension is using the drawer.",
                   "translatable": true
                 },
                 "description": {
@@ -63,6 +72,37 @@
                   "title": "",
                   "inputType": "Text",
                   "validators": [],
+                  "help": "The description text for the resources button which displays when more than one extension is using the drawer.",
+                  "translatable": true
+                },
+                "displayTitle": {
+                  "type": "string",
+                  "default": "",
+                  "required": false,
+                  "title": "",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "The title for the resources which displays at the top of the resources drawer.",
+                  "translatable": true
+                },
+                "body": {
+                  "type": "string",
+                  "default": "",
+                  "required": false,
+                  "title": "",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "The body text for the resources which displays at the top of the resources drawer.",
+                  "translatable": true
+                },
+                "instruction": {
+                  "type": "string",
+                  "default": "",
+                  "required": false,
+                  "title": "",
+                  "inputType": "Text",
+                  "validators": [],
+                  "help": "The instruction text for the resources which displays at the top of the resources drawer.",
                   "translatable": true
                 },
                 "_filterButtons": {

schema/course.schema.json

@@ -16,6 +16,14 @@
               "type": "object",
               "default": {},
               "properties": {
+                "ariaRegion": {
+                  "type": "string",
+                  "title": "Resources: ARIA region",
+                  "default": "",
+                  "_adapt": {
+                    "translatable": true
+                  }
+                },
                 "resources": {
                   "type": "string",
                   "title": "Resources",
@@ -52,6 +60,7 @@
               "type": "string",
               "title": "Title",
               "default": "Resources",
+              "description": "The title for the resources button which displays when more than one extension is using the drawer.",
               "_adapt": {
                 "translatable": true
               }
@@ -60,6 +69,34 @@
               "type": "string",
               "title": "Description",
               "default": "Select here to view resources for this course",
+              "description": "The description text for the resources button which displays when more than one extension is using the drawer.",
+              "_adapt": {
+                "translatable": true
+              }
+            },
+            "displayTitle": {
+              "type": "string",
+              "title": "Display title",
+              "default": "",
+              "description": "The title for the resources which displays at the top of the resources drawer.",
+              "_adapt": {
+                "translatable": true
+              }
+            },
+            "body": {
+              "type": "string",
+              "title": "Body",
+              "default": "",
+              "description": "The body text for the resources which displays at the top of the resources drawer.",
+              "_adapt": {
+                "translatable": true
+              }
+            },
+            "instruction": {
+              "type": "string",
+              "title": "Instruction",
+              "default": "",
+              "description": "The instruction text for the resources which displays at the top of the resources drawer.",
               "_adapt": {
                 "translatable": true
               }

templates/resources.jsx

@@ -58,7 +58,7 @@ export default function Resources (props) {
   return (
     <div className="resources__inner">
 
-      <templates.header {...props} />
+      <templates.header {...props.model} />
 
       {resourcesHasMultipleTypes(resources) &&
       <div className={classes([