From a990e1fee8c52193149ea62c1f6216ab73833972 Mon Sep 17 00:00:00 2001 From: Gregory Martin Date: Thu, 2 Nov 2017 17:26:26 -0400 Subject: [PATCH] Add Paragon Implementation to Wiki --- .../accessible_components/StatusBarAlert.jsx | 43 +++++++++++++++++++ lms/templates/main_django.html | 4 +- lms/templates/wiki/base.html | 16 +++++-- package.json | 10 ++--- webpack.common.config.js | 3 +- 5 files changed, 64 insertions(+), 12 deletions(-) create mode 100644 lms/static/js/accessible_components/StatusBarAlert.jsx diff --git a/lms/static/js/accessible_components/StatusBarAlert.jsx b/lms/static/js/accessible_components/StatusBarAlert.jsx new file mode 100644 index 0000000000..649ef5422b --- /dev/null +++ b/lms/static/js/accessible_components/StatusBarAlert.jsx @@ -0,0 +1,43 @@ +/* +Wrapper for React/Paragon accessible status bar +*/ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import StatusAlert from '@edx/paragon/src/StatusAlert/index.jsx'; + +export class StatusAlertRenderer { + constructor(message, selector, afterselector) { + this.shiftFocus = this.shiftFocus.bind(this); + const element = document.querySelector(selector); + + if (element) { + /* + These props match the defaults mostly in the paragon lib: + https://github.com/edx/paragon/tree/master/src/StatusAlert + but are made explicit in the case of a upstream change to defaults + */ + ReactDOM.render( + this.shiftFocus(afterselector)} + />, + document.querySelector(selector) + ); + } + } + + shiftFocus(afterselector) { + const afterelement = document.querySelector(afterselector); + /* + Optional generic function to shift 'next' focusable element for keyboard users + */ + if (afterelement) { + afterelement.focus(); + } + } +} diff --git a/lms/templates/main_django.html b/lms/templates/main_django.html index 406775084f..5b5c91e2b3 100644 --- a/lms/templates/main_django.html +++ b/lms/templates/main_django.html @@ -26,6 +26,8 @@ + {% load render_bundle from webpack_loader %} + {% render_bundle "commons" %}
{% trans "Skip to main content" %} {% with course=request.course %} @@ -40,8 +42,6 @@ {% endwith %}
- {% load render_bundle from webpack_loader %} - {% render_bundle "commons" %} {% javascript 'base_application' %} diff --git a/lms/templates/wiki/base.html b/lms/templates/wiki/base.html index bd5adfcf66..ec344b6c20 100644 --- a/lms/templates/wiki/base.html +++ b/lms/templates/wiki/base.html @@ -59,6 +59,9 @@ {% endif %}
+ {% load render_bundle from webpack_loader %} + {% render_bundle "AlertStatusBar" %} +
- × - {{ message }} -
+
+ + {% endfor %} {% endif %} diff --git a/package.json b/package.json index c3ffce2bc6..95818fd36b 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,9 @@ "name": "edx", "version": "0.1.0", "dependencies": { + "@edx/edx-bootstrap": "^0.4.1", + "@edx/paragon": "^0.2.0", + "@edx/studio-frontend": "^0.3.0", "babel-core": "^6.23.0", "babel-loader": "^6.4.0", "babel-plugin-transform-class-properties": "^6.24.1", @@ -14,9 +17,6 @@ "coffee-loader": "^0.7.3", "coffee-script": "1.6.1", "css-loader": "^0.28.5", - "@edx/edx-bootstrap": "^0.4.1", - "@edx/paragon": "^0.2.0", - "@edx/studio-frontend": "^0.3.0", "edx-pattern-library": "0.18.1", "edx-ui-toolkit": "1.5.2", "exports-loader": "^0.6.4", @@ -40,14 +40,14 @@ "requirejs": "~2.3.2", "rtlcss": "^2.2.0", "sass-loader": "^6.0.6", - "style-loader": "^0.18.2", "string-replace-webpack-plugin": "^0.1.3", + "style-loader": "^0.18.2", "uglify-js": "2.7.0", "underscore": "~1.8.3", "underscore.string": "~3.3.4", "webpack": "^2.2.1", - "webpack-merge": "^4.1.0", "webpack-bundle-tracker": "^0.2.0", + "webpack-merge": "^4.1.0", "which-country": "1.0.0" }, "devDependencies": { diff --git a/webpack.common.config.js b/webpack.common.config.js index 4b1bebbb68..c949e47df9 100644 --- a/webpack.common.config.js +++ b/webpack.common.config.js @@ -21,8 +21,9 @@ module.exports = { Import: './cms/static/js/features/import/factories/import.js', StudioIndex: './cms/static/js/features_jsx/studio/index.jsx', - // LMS: single support form + // LMS SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx', + AlertStatusBar: './lms/static/js/accessible_components/StatusBarAlert.jsx', // Features CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',