A11Y: makes toolbar tabindex independent from its context (#17889)

Prior to this fix, if `<DEditor />` was used in a context where quote would not be the first button, then no  button would be focusable.

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -816,7 +816,6 @@ export default Component.extend(ComposerUploadUppy, {
 
     extraButtons(toolbar) {
       toolbar.addButton({
-        tabindex: "0",
         id: "quote",
         group: "fontStyles",
         icon: "far-comment",

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -363,6 +363,12 @@ export default Component.extend(TextareaTextManipulation, {
     if (this.extraButtons) {
       this.extraButtons(toolbar);
     }
+
+    const firstButton = toolbar.groups.mapBy("buttons").flat().firstObject;
+    if (firstButton) {
+      firstButton.tabindex = 0;
+    }
+
     return toolbar;
   },
 

app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js

@@ -6,6 +6,7 @@ import {
   exists,
   paste,
   query,
+  queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import {
   getTextareaSelection,
@@ -705,6 +706,18 @@ third line`
     );
   });
 
+  test("toolbar buttons tabindex", async function (assert) {
+    await render(hbs`<DEditor />`);
+    const buttons = queryAll(".d-editor-button-bar .btn");
+
+    assert.strictEqual(
+      buttons[0].getAttribute("tabindex"),
+      "0",
+      "it makes the first button focusable"
+    );
+    assert.strictEqual(buttons[1].getAttribute("tabindex"), "-1");
+  });
+
   testCase("replace-text event by default", async function (assert) {
     this.set("value", "red green blue");