public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility: Ensure dashboard edit panel inputs have accessible labels (again) (#110163)

Browse Source 
* Revert "Revert: "Accessibility: Ensure dashboard edit panel inputs have accessible labels" (#109984)"

This reverts commit 7331a2e8c3.

* revert test change that accidentally catches the issue

* use useId in some places

* make ID required

* fix some ids

* fix a couple more

* add ids to variables

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* add ids to get viz options

* add ids in getPanelFrameOptions

* add getFieldOverrideElements

* change name

* Replace other uuids with hard coded ids

* hoist useId out

* use some new selectors for table e2es

* commit betterer crimes

* use useId where we can

* Revert "use useId where we can"

This reverts commit 34090ac75d.

* fix some dashboard layouts tests

* rm AutoCellOptionsEditor

* idk try and fix tests

* restore fixed its for url state

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>
Co-authored-by: Paul Marbach <paul.marbach@grafana.com>
This commit is contained in:
Josh Hunt
2025-08-27 13:10:47 +01:00
committed by GitHub
co-authored by Ashley Harrison Ashley Harrison Paul Marbach
parent 85c567609d
commit 67b22177a8
69 changed files with 438 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e-playwright/dashboard-new-layouts/dashboard-group-panels.spec.ts
+2 -6
View File
@@ -406,9 +406,7 @@ test.describe(
await dashboardPage.getByGrafanaSelector(selectors.components.EditPaneHeader.backButton).click({ force: true });
// Expand layouts section
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('group-layout-category'))
.click();
await page.getByLabel('Expand Group layout category').click();
// Select tabs layout
await page.getByLabel('Tabs').click();
@@ -695,9 +693,7 @@ test.describe(
await dashboardPage.getByGrafanaSelector(selectors.components.EditPaneHeader.backButton).click({ force: true });
// Expand layouts section
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('group-layout-category'))
.click();
await page.getByLabel('Expand Group layout category').click();
// Select rows layout
await page.getByLabel('Rows').click();
e2e-playwright/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
+1 -1
View File
@@ -34,7 +34,7 @@ test.describe(
const initialBackground = await panelTitle.evaluate((el) => getComputedStyle(el).background);
expect(initialBackground).not.toMatch(/rgba\(0, 0, 0, 0\)/);
await page.locator('#transparent-background').click({ force: true });
await page.getByRole('switch', { name: 'Transparent background' }).click({ force: true });
const transparentBackground = await panelTitle.evaluate((el) => getComputedStyle(el).background);
expect(transparentBackground).toMatch(/rgba\(0, 0, 0, 0\)/);
e2e-playwright/dashboard-new-layouts/dashboards-panel-layouts.spec.ts
+7 -21
View File
@@ -31,9 +31,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
@@ -64,9 +62,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
@@ -126,9 +122,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
@@ -185,9 +179,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
@@ -222,9 +214,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
@@ -279,9 +269,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
@@ -338,9 +326,7 @@ test.describe(
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel'))
).toHaveCount(3);
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.toggle('grid-layout-category'))
.click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('Auto grid').click();
e2e-playwright/panels-suite/table-kitchenSink.spec.ts
+12 -14
View File
@@ -75,11 +75,9 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
// text wrapping is enabled by default on this panel.
await expect(getCellHeight(page, 1, longTextColIdx)).resolves.toBeGreaterThan(100);
// FIXME very bad selector to get the correct "wrap text" toggle here.
// toggle the lorem ipsum column's wrap text toggle and confirm that the height shrinks.
await page
.locator('[id="Override 13"]')
.locator(`[aria-label="${selectors.components.PanelEditor.OptionsPane.fieldLabel('Wrap text')}"]`)
await dashboardPage
.getByGrafanaSelector(selectors.components.OptionsGroup.group('panel-options-override-12'))
.getByLabel(selectors.components.PanelEditor.OptionsPane.fieldLabel('Wrap text'))
.click();
await expect(getCellHeight(page, 1, longTextColIdx)).resolves.toBeLessThan(100);
@@ -95,8 +93,8 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
await dashboardPage
.getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Cell options Cell value inspect'))
.first()
.locator('label[for="custom.inspect"]')
.click();
.getByRole('switch', { name: 'Cell value inspect' })
.click({ force: true });
await loremIpsumCell.hover();
await expect(getCellHeight(page, 1, longTextColIdx)).resolves.toBeLessThan(100);
@@ -117,19 +115,19 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('Table - Kitchen Sink'))
).toBeVisible();
const stateOverride = dashboardPage.getByGrafanaSelector(
selectors.components.OptionsGroup.group('panel-options-override-11')
);
// confirm that "State" column is hidden by default.
expect(page.getByRole('row').nth(0)).not.toContainText('State');
// toggle the "State" column visibility and test that it appears before re-hiding it.
// FIXME this selector is utterly godawful, but there's no way to give testIds or aria-labels or anything to
// the panel editor builder. we should fix that to make e2e's easier to write for our team.
const hideStateColumnSwitch = page.locator('[id="Override 12"]').locator('label').last();
// toggle the "State" column visibility via the override we set up in the kitchen sink panel.
const hideStateColumnSwitch = stateOverride.locator('label').last();
await hideStateColumnSwitch.click();
expect(page.getByRole('row').nth(0)).toContainText('State');
// now change the display name of the "State" column.
// FIXME it would be good to have a better selector here too.
const displayNameInput = page.locator('[id="Override 12"]').locator('input[value="State"]').last();
const displayNameInput = stateOverride.locator('input[value="State"]').last();
await displayNameInput.fill('State (renamed)');
await displayNameInput.press('Enter');
expect(page.getByRole('row').nth(0)).toContainText('State (renamed)');