refactor aria labeling

This commit is contained in:
Scott Bell 2024-09-10 10:27:45 +02:00
parent 8b4eed938a
commit 60e07e642b
2 changed files with 14 additions and 16 deletions

View File

@ -19,7 +19,11 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
import { createDomainObjectWithDefaults, setRealTimeMode } from '../../../../appActions.js'; import {
createDomainObjectWithDefaults,
createExampleTelemetryObject,
setRealTimeMode
} from '../../../../appActions.js';
import { expect, test } from '../../../../pluginFixtures.js'; import { expect, test } from '../../../../pluginFixtures.js';
test.describe('Comps', () => { test.describe('Comps', () => {
@ -39,11 +43,7 @@ test.describe('Comps', () => {
parent: folder.uuid parent: folder.uuid
}); });
// Create a sine wave generator within the comp const telemetryObject = await createExampleTelemetryObject(page, comp.uuid);
const sineWaveGenerator1 = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
parent: comp.uuid
});
// Check that expressions can be edited // Check that expressions can be edited
await page.goto(comp.url); await page.goto(comp.url);
@ -74,8 +74,8 @@ test.describe('Comps', () => {
// Check that object path is correct // Check that object path is correct
const { myItemsFolderName } = openmctConfig; const { myItemsFolderName } = openmctConfig;
let objectPath = await page.getByLabel(`${sineWaveGenerator1.name} Object Path`).textContent(); let objectPath = await page.getByLabel(`${telemetryObject.name} Object Path`).textContent();
const expectedObjectPath = `/${myItemsFolderName}/${folder.name}/${comp.name}/${sineWaveGenerator1.name}`; const expectedObjectPath = `/${myItemsFolderName}/${folder.name}/${comp.name}/${telemetryObject.name}`;
expect(objectPath).toBe(expectedObjectPath); expect(objectPath).toBe(expectedObjectPath);
// Check that the comps are saved // Check that the comps are saved
@ -85,7 +85,7 @@ test.describe('Comps', () => {
expect(expression).toBe('b*2'); expect(expression).toBe('b*2');
// Check that object path is still correct after save // Check that object path is still correct after save
objectPath = await page.getByLabel(`${sineWaveGenerator1.name} Object Path`).textContent(); objectPath = await page.getByLabel(`${telemetryObject.name} Object Path`).textContent();
expect(objectPath).toBe(expectedObjectPath); expect(objectPath).toBe(expectedObjectPath);
// Check that comps work after being saved // Check that comps work after being saved

View File

@ -45,10 +45,12 @@
<section <section
id="telemetryReferenceSection" id="telemetryReferenceSection"
class="c-comps__section c-comps__refs-and-controls" class="c-comps__section c-comps__refs-and-controls"
aria-label="Derived Telemetry References" aria-describedby="telemetryReferences"
> >
<div class="c-cs__header c-section__header"> <div class="c-cs__header c-section__header">
<div class="c-cs__header-label c-section__label">Telemetry References</div> <div id="telemetryReferences" class="c-cs__header-label c-section__label">
Telemetry References
</div>
</div> </div>
<div :class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]"> <div :class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]">
@ -107,11 +109,7 @@
</div> </div>
</div> </div>
</section> </section>
<section <section id="expressionSection" class="c-comps__section c-comps__expression">
id="expressionSection"
aria-label="Derived Telemetry Expression"
class="c-comps__section c-comps__expression"
>
<div class="c-cs__header c-section__header"> <div class="c-cs__header c-section__header">
<div class="c-cs__header-label c-section__label">Expression</div> <div class="c-cs__header-label c-section__label">Expression</div>
</div> </div>