cherry-pick Use the disabled attribute on a valid element - the button. (#7914) (#8043)

Use the disabled attribute on a valid element - the button. (#7914)
* Add e2e test to check for add criteria button being enabled/disabled

Co-authored-by: Shefali Joshi <[email protected]>

Author: akhenry

e2e/tests/functional/plugins/conditionSet/conditionSetOperations.e2e.spec.js

@@ -287,6 +287,41 @@ test.describe('Basic Condition Set Use', () => {
       description: 'https://github.com/nasa/openmct/issues/7484'
     });
   });
+
+  test('ConditionSet has add criteria button enabled/disabled when composition is and is not available', async ({
+    page
+  }) => {
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    await page.getByLabel('Show selected item in tree').click();
+    await page.goto(conditionSet.url);
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Create a condition
+    await page.locator('#addCondition').click();
+    await page.locator('#conditionCollection').getByRole('textbox').nth(0).fill('First Condition');
+
+    // Validate that the add criteria button is disabled
+    await expect(page.getByLabel('Add Criteria - Disabled')).toHaveAttribute('disabled');
+
+    // Add Telemetry to ConditionSet
+    const sineWaveGeneratorTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: exampleTelemetry.name
+      });
+    const conditionCollection = page.locator('#conditionCollection');
+    await sineWaveGeneratorTreeItem.dragTo(conditionCollection);
+
+    // Validate that the add criteria button is enabled and adds a new criterion
+    await expect(page.getByLabel('Add Criteria - Enabled')).not.toHaveAttribute('disabled');
+    await page.getByLabel('Add Criteria - Enabled').click();
+    const numOfUnnamedCriteria = await page.getByLabel('Criterion Telemetry Selection').count();
+    expect(numOfUnnamedCriteria).toEqual(2);
+  });
 });
 
 test.describe('Condition Set Composition', () => {

src/plugins/condition/components/ConditionItem.vue

@@ -160,8 +160,10 @@
             </div>
           </template>
           <div class="c-cdef__separator c-row-separator"></div>
-          <div class="c-cdef__controls" :disabled="!telemetry.length">
+          <div class="c-cdef__controls">
             <button
+              :disabled="!telemetry.length"
+              :aria-label="`Add Criteria - ${!telemetry.length ? 'Disabled' : 'Enabled'}`"
               class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
               @click="addCriteria"
             >