privileged-action: use a fieldset instead of JS to disable children

Author: LawnGnome

Diff for: app/components/privileged-action.hbs

@@ -8,8 +8,10 @@
       {{yield to='placeholder'}}
     </div>
   {{else}}
-    <div local-class='placeholder' {{did-insert this.disableComponents}}>
-      {{yield}}
+    <div local-class='placeholder'>
+      <fieldset disabled="disabled">
+        {{yield}}
+      </fieldset>
       <EmberTooltip>
         You must enable admin actions before you can perform this operation.
       </EmberTooltip>

Diff for: app/components/privileged-action.js

@@ -42,14 +42,4 @@ export default class PrivilegedAction extends Component {
   get canBePrivileged() {
     return !this.args.userAuthorised && this.session.currentUser?.is_admin && !this.session.isSudoEnabled;
   }
-
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  disableComponents(element) {
-    [...element.querySelectorAll('input, select, textarea, button')].forEach(control => {
-      control.setAttribute('disabled', 'disabled');
-    });
-  }
 }

Diff for: app/components/privileged-action.module.css

@@ -1,5 +1,25 @@
 .placeholder {
-    [disabled] {
+    fieldset {
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    fieldset[disabled] {
         cursor: not-allowed;
+
+        [disabled] {
+            cursor: not-allowed;
+        }
+
+        button,
+        .yellow-button,
+        .tan-button {
+            /* This duplicates the styles in .button[disabled] as there's no
+             * obvious way to compose them, given the target selectors. */
+            background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
+            color: var(--disabled-text-color);
+            cursor: not-allowed;
+        }
     }
 }

Diff for: tests/components/privileged-action-test.js

@@ -111,16 +111,17 @@ module('Component | PrivilegedAction', hooks => {
     // We're trying to confirm that all the form controls are automatically
     // disabled.
     await render(hbs`
-      <PrivilegedAction @userAuthorised={{false}}>
-        <div data-test-content>
+      <div data-test-content>
+        <PrivilegedAction @userAuthorised={{false}}>
           <button data-test-control type="button">Click me maybe?</button>
           <label for="input">Input: </label><input data-test-control type="text" id="input" />
           <label for="select">Select: </label><select data-test-control id="select"><option>foo</option></select>
           <label for="textarea">Textarea: </label><textarea data-test-control id="textarea" />
-        </div>
-      </PrivilegedAction>
+        </PrivilegedAction>
+      </div>
     `);
-    assert.dom('[data-test-content] [data-test-control]').exists().isDisabled();
+    assert.dom('[data-test-content] fieldset').exists().isDisabled();
+    assert.dom('[data-test-content] fieldset [data-test-control]').exists();
   });
 
   test('automatic unprivileged block', async function (assert) {