From 013697adc6f109699eec9b46a6371e21f063bfbe Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 12 Mar 2019 12:32:53 +0100
Subject: [PATCH] Improved ARIA support

---
 .../redactor2/plugins/WoltLabButton.js        |  28 +--
 .../redactor2/plugins/WoltLabObserve.js       |   4 +
 .../redactor2/plugins/WoltLabSource.js        |   4 -
 .../js/3rdParty/redactor2/plugins/source.js   | 174 ++++--------------
 .../files/js/3rdParty/redactor2/redactor.js   |  22 ++-
 .../WoltLabSuite/Core/Ui/Dropdown/Simple.js   |   4 -
 6 files changed, 60 insertions(+), 176 deletions(-)

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index 7d9b4f9bec..e57f590fb2 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -5,20 +5,6 @@ $.Redactor.prototype.WoltLabButton = function() {
 	
 	return {
 		init: function() {
-			// tooltips are handled on our own
-			this.button.buildButtonTooltip = function () {};
-			
-			var mpClickCallback = this.button.clickCallback;
-			this.button.clickCallback = (function(e, callback, btnName, args) {
-				// prevent the browser from breaking the editor focus
-				if (typeof e.preventDefault === 'function') {
-					e.preventDefault();
-				}
-				
-				//noinspection JSUnresolvedFunction
-				mpClickCallback.call(this, e, callback, btnName, args);
-			}).bind(this);
-			
 			// add custom buttons
 			var button, buttonName, i, length;
 			//noinspection JSUnresolvedVariable
@@ -30,6 +16,8 @@ $.Redactor.prototype.WoltLabButton = function() {
 				this.button.addCallback(button, this.WoltLabButton._handleCustomButton);
 			}
 			
+			var toolbar = this.core.toolbar()[0];
+			
 			// set button icons and labels
 			var buttonData, icon, iconIsImage;
 			for (i = 0, length = this.opts.buttons.length; i < length; i++) {
@@ -73,10 +61,7 @@ $.Redactor.prototype.WoltLabButton = function() {
 				}
 				
 				icon = buttonData.icon;
-				iconIsImage = false;
-				if (!icon.match(/^fa-/) && icon.match(/\.(gif|jpe?g|png|svg)$/)) {
-					iconIsImage = true;
-				}
+				iconIsImage = (!icon.match(/^fa-/) && icon.match(/\.(gif|jpe?g|png|svg)$/));
 				
 				// set icon
 				//noinspection CssUnknownTarget
@@ -87,7 +72,7 @@ $.Redactor.prototype.WoltLabButton = function() {
 				
 				// set title
 				//noinspection JSUnresolvedVariable
-				elAttr(button[0], 'title', buttonData.title);
+				button[0].title = buttonData.title;
 				button[0].classList.add('jsTooltip');
 				
 				// update dropdown label for list
@@ -98,9 +83,6 @@ $.Redactor.prototype.WoltLabButton = function() {
 				}
 			}
 			
-			var toolbar = this.core.toolbar()[0];
-			elBySelAll('.re-button-tooltip', toolbar.parentNode, elRemove);
-			
 			// enforce button order as provided with `opts.buttons`
 			var listItem, toolbarButtons = {}, toolbarOrder = [];
 			while (toolbar.childElementCount) {
@@ -154,7 +136,7 @@ $.Redactor.prototype.WoltLabButton = function() {
 			}).bind(this));
 			
 			// prevent drag & drop of toolbar buttons
-			this.$toolbar[0].addEventListener('dragstart', function (event) {
+			toolbar.addEventListener('dragstart', function (event) {
 				event.preventDefault();
 			});
 			
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js
index 00a2b1dbfd..91d42f462e 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabObserve.js
@@ -81,6 +81,10 @@ $.Redactor.prototype.WoltLabObserve = function() {
 					this.button.enable('woltlabQuote');
 				}
 				
+				if (isSource) {
+					this.button.setActive('html');
+				}
+				
 				// WoltLab modification: we know that there will be quite a few
 				// active button states, so we'll simply check all ancestors one
 				// by one instead of searching the DOM over and over again
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSource.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSource.js
index fefba54a90..9b07098964 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSource.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabSource.js
@@ -58,10 +58,6 @@ $.Redactor.prototype.WoltLabSource = function() {
 				});
 			}
 			
-			// disable caret position in source mode
-			this.source.setCaretOnShow = function () {};
-			this.source.setCaretOnHide = function (html) { return html; };
-			
 			var mpHide = this.source.hide;
 			this.source.hide = (function () {
 				// use jQuery to parse, its parser is much more graceful
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js
index 8724a96520..09496cc879 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/source.js
@@ -1,13 +1,10 @@
-(function($)
-{
-	$.Redactor.prototype.source = function()
-	{
+(function ($) {
+	$.Redactor.prototype.source = function () {
 		return {
-			init: function()
-			{
+			init: function () {
 				var button = this.button.addFirst('html', 'HTML');
 				this.button.addCallback(button, this.source.toggle);
-
+				
 				var style = {
 					'width': '100%',
 					'margin': '0',
@@ -20,175 +17,76 @@
 					'line-height': '22px',
 					'font-family': 'Menlo, Monaco, Consolas, "Courier New", monospace'
 				};
-
+				
 				this.source.$textarea = $('<textarea />');
 				this.source.$textarea.css(style).hide();
-
-				if (this.opts.type === 'textarea')
-				{
+				
+				if (this.opts.type === 'textarea') {
 					this.core.box().append(this.source.$textarea);
 				}
-				else
-				{
+				else {
 					this.core.box().after(this.source.$textarea);
 				}
-
-				this.core.element().on('destroy.callback.redactor', $.proxy(function()
-				{
+				
+				this.core.element().on('destroy.callback.redactor', $.proxy(function () {
 					this.source.$textarea.remove();
-
+					
 				}, this));
-
+				
 			},
-			toggle: function()
-			{
+			toggle: function () {
 				return (this.source.$textarea.hasClass('open')) ? this.source.hide() : this.source.show();
 			},
-			setCaretOnShow: function()
-			{
-				this.source.offset = this.offset.get();
-				var scroll = $(window).scrollTop();
-
-				var	width = this.core.editor().innerWidth();
-				var height = this.core.editor().innerHeight();
-
-				// caret position sync
-				this.source.start = 0;
-				this.source.end = 0;
-				var $editorDiv = $("<div/>").append($.parseHTML(this.core.editor().html(), document, true));
-				var $selectionMarkers = $editorDiv.find("span.redactor-selection-marker");
-
-				if ($selectionMarkers.length > 0)
-				{
-					var editorHtml = $editorDiv.html().replace(/&amp;/g, '&');
-
-					if ($selectionMarkers.length === 1)
-					{
-						this.source.start = this.utils.strpos(editorHtml, $editorDiv.find("#selection-marker-1").prop("outerHTML"));
-						this.source.end = this.source.start;
-					}
-					else if ($selectionMarkers.length === 2)
-					{
-						this.source.start = this.utils.strpos(editorHtml, $editorDiv.find("#selection-marker-1").prop("outerHTML"));
-						this.source.end = this.utils.strpos(editorHtml, $editorDiv.find("#selection-marker-2").prop("outerHTML")) - $editorDiv.find("#selection-marker-1").prop("outerHTML").toString().length;
-					}
-				}
-
-			},
-			setCaretOnHide: function(html)
-			{
-				this.source.start = this.source.$textarea.get(0).selectionStart;
-				this.source.end = this.source.$textarea.get(0).selectionEnd;
-
-				// if selection starts from end
-				if (this.source.start > this.source.end && this.source.end > 0)
-				{
-					var tempStart = this.source.end;
-					var tempEnd = this.source.start;
-
-					this.source.start = tempStart;
-					this.source.end = tempEnd;
-				}
-
-				this.source.start = this.source.enlargeOffset(html, this.source.start);
-				this.source.end = this.source.enlargeOffset(html, this.source.end);
-
-				html = html.substr(0, this.source.start) + this.marker.html(1) + html.substr(this.source.start);
-
-				if (this.source.end > this.source.start)
-				{
-					var markerLength = this.marker.html(1).toString().length;
-
-					html = html.substr(0, this.source.end + markerLength) + this.marker.html(2) + html.substr(this.source.end + markerLength);
-				}
-
-				return html;
-
-			},
-			hide: function()
-			{
+			setCaretOnShow: function () {},
+			setCaretOnHide: function (html) { return html; },
+			hide: function () {
 				this.source.$textarea.removeClass('open').hide();
 				this.source.$textarea.off('.redactor-source');
-
+				
 				var code = this.source.$textarea.val();
-
+				
 				code = this.paragraphize.load(code);
-				code = this.source.setCaretOnHide(code);
-
+				
 				this.code.start(code);
 				this.button.enableAll();
 				this.core.editor().show().focus();
 				this.selection.restore();
 				this.code.sync();
 			},
-			show: function()
-			{
+			show: function () {
 				this.selection.save();
-				this.source.setCaretOnShow();
-
+				
 				var height = this.core.editor().innerHeight();
 				var code = this.code.get();
-				code = code.replace(/\n\n\n/g, "\n");
-				code = code.replace(/\n\n/g, "\n");
-
+				code = code.replace(/\n\n\n/g, '\n');
+				code = code.replace(/\n\n/g, '\n');
+				
 				this.core.editor().hide();
 				this.button.disableAll('html');
 				this.source.$textarea.val(code).height(height).addClass('open').show();
-				this.source.$textarea.on('keyup.redactor-source', $.proxy(function()
-				{
-					if (this.opts.type === 'textarea')
-					{
+				this.source.$textarea.on('keyup.redactor-source', $.proxy(function () {
+					if (this.opts.type === 'textarea') {
 						this.core.textarea().val(this.source.$textarea.val());
 					}
-
+					
 				}, this));
-
+				
 				this.marker.remove();
-
+				
 				$(window).scrollTop(scroll);
-
-				if (this.source.$textarea[0].setSelectionRange)
-				{
+				
+				if (this.source.$textarea[0].setSelectionRange) {
 					this.source.$textarea[0].setSelectionRange(this.source.start, this.source.end);
 				}
-
+				
 				this.source.$textarea[0].scrollTop = 0;
-
-				setTimeout($.proxy(function()
-				{
+				
+				setTimeout($.proxy(function () {
 					this.source.$textarea.focus();
-
+					this.button.setActive('html');
 				}, this), 0);
 			},
-			enlargeOffset: function(html, offset)
-			{
-				var htmlLength = html.length;
-				var c = 0;
-
-				if (html[offset] === '>')
-				{
-					c++;
-				}
-				else
-				{
-					for(var i = offset; i <= htmlLength; i++)
-					{
-						c++;
-
-						if (html[i] === '>')
-						{
-							break;
-						}
-						else if (html[i] === '<' || i === htmlLength)
-						{
-							c = 0;
-							break;
-						}
-					}
-				}
-
-				return offset + c;
-			}
+			enlargeOffset: function () {}
 		};
 	};
 })(jQuery);
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js b/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js
index aa06c0aaea..74923a50f1 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/redactor.js
@@ -1620,6 +1620,7 @@
 						}).bind(this));
 						
 						elData(button, 'a11y-mouse-event', 'mousedown');
+						elData(button, 'aria-expanded', false);
 						
 						button.addEventListener('click', function (event) {
 							event.preventDefault();
@@ -1687,6 +1688,10 @@
 				clickCallback: function (e, callback, btnName, args) {
 					var func;
 					
+					if (e instanceof Event) {
+						e.preventDefault();
+					}
+					
 					args = (typeof args === 'undefined') ? btnName : args;
 					
 					if ($.isFunction(callback)) {
@@ -1871,13 +1876,16 @@
 						$btns = $btns.not('.re-' + key);
 					}
 					
-					$btns.removeClass('redactor-act');
+					$btns.removeClass('redactor-act').attr({
+						'aria-pressed': false,
+						tabindex: (key === 'html') ? 0 : -1
+					});
 				},
 				disable: function (key) {
-					this.button.get(key).addClass('redactor-button-disabled');
+					this.button.get(key).addClass('redactor-button-disabled').attr('aria-disabled', true);
 				},
 				enable: function (key) {
-					this.button.get(key).removeClass('redactor-button-disabled');
+					this.button.get(key).removeClass('redactor-button-disabled').attr('aria-disabled', false);
 				},
 				disableAll: function (key) {
 					var $btns = this.button.toolbar().find('a.re-button');
@@ -1885,10 +1893,10 @@
 						$btns = $btns.not('.re-' + key);
 					}
 					
-					$btns.addClass('redactor-button-disabled');
+					$btns.addClass('redactor-button-disabled').attr('aria-disabled', true);
 				},
 				enableAll: function () {
-					this.button.toolbar().find('a.re-button').removeClass('redactor-button-disabled');
+					this.button.toolbar().find('a.re-button').removeClass('redactor-button-disabled').attr('aria-disabled', false);
 				},
 				remove: function (key) {
 					this.button.get(key).remove();
@@ -3501,7 +3509,7 @@
 							});
 							
 							this.button.setActive(this.dropdown.key);
-							this.dropdown.button.addClass('dropact');
+							this.dropdown.button.addClass('dropact').attr('aria-expanded', true);
 							
 							this.dropdown.enableCallback();
 						}
@@ -3542,7 +3550,7 @@
 						UiSimpleDropdown.close(id);
 					});
 					
-					this.dropdown.button.removeClass('redactor-act dropact');
+					this.dropdown.button.removeClass('redactor-act dropact').attr('aria-expanded', false);
 					this.dropdown.button = false;
 					this.dropdown.key = false;
 					this.dropdown.active = false;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
index 165b88ac45..390c7bf0d4 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
@@ -597,10 +597,6 @@ define(
 				this._toggle(null, _activeTargetId);
 				if (button) button.focus();
 			}
-		},
-		
-		_getNextVisibleItem: function(activeItem, index) {
-			var items = Array.prototype.slice.call(elBySelAll('li', activeItem.closest('.dropdownMenu')));
 		}
 	};
 });
-- 
2.20.1