Toolbar Example: Set focus to button with tabindex="0" when the conta…

…iner is clicked (pull #1700) fixes #987 Co-authored-by: Carolyn MacLeod <[email protected]> Co-authored-by: Matthew Schad <[email protected]> Co-authored-by: Matt King <[email protected]> Co-authored-by: Carolyn MacLeod <[email protected]>
w3c · Dec 22, 2020 · 13ea4e3 · 13ea4e3
1 parent 1e11b3d
commit 13ea4e3
Show file tree

Hide file tree

Showing 4 changed files with 381 additions and 176 deletions.
diff --git a/cspell.json b/cspell.json
@@ -168,6 +168,7 @@
         "Thiel",
         "Thiers",
         "thomascorthals",
+        "togglable",
         "transactinide",
         "transuranic",
         "Transuranium",

diff --git a/examples/toolbar/js/FormatToolbar.js b/examples/toolbar/js/FormatToolbar.js
@@ -47,6 +47,7 @@ FormatToolbar.prototype.init = function () {
     this.domNode.getBoundingClientRect().width - 12 + 'px';
   this.textarea.addEventListener('mouseup', this.selectTextContent.bind(this));
   this.textarea.addEventListener('keyup', this.selectTextContent.bind(this));
+  this.domNode.addEventListener('click', this.handleContainerClick.bind(this));
 
   this.selected = this.textarea.selectText;
 
@@ -81,6 +82,16 @@ FormatToolbar.prototype.init = function () {
   }
 };
 
+FormatToolbar.prototype.handleContainerClick = function () {
+  if (event.target !== this.domNode) return;
+  this.setFocusCurrentItem();
+};
+
+FormatToolbar.prototype.setFocusCurrentItem = function () {
+  var item = this.domNode.querySelector('[tabindex="0"]');
+  item.focus();
+};
+
 FormatToolbar.prototype.selectTextContent = function () {
   this.start = this.textarea.selectionStart;
   this.end = this.textarea.selectionEnd;