openmct/e2e/tests/visual-a11y/components/header.visual.spec.js
Charles Hacskaylo 068ac4899d
Fix constrast for accessibility (#7315)
* Closes #7304
- Change colors to increase contrast.
- New base level theme color var: `$colorBodyFgSubtle`.
- Minor CSS cleanups.
- WARNING: this appears to have added a regression in selects
that colors the arrow black in Espresso.

* Closes #7304
- Fix dropdown arrow colors, whew.
- Normalize font sizes in Status area.
- More color changes for contrast, including new theme constants.
- TODO: compare and sync Espresso with other themes.
- TODO: check for regressions!

* disable ruleset

* Closes #7304
- Normalize font sizes in multiple spots.
- More color changes for contrast, including more new theme constants.
- TODO: compare and sync Espresso with other themes.
- TODO: check for regressions!

* Closes #7304
- Reorganize CSS files for more uniformity.

* Closes #7304
- CSS normalized across all themes via Google Sheet at https://docs.google.com/spreadsheets/d/1SEEtuNSq6I7gvVHKpHW8_fp8Ltc-HOAWxrSAkUzS6Kw/edit?usp=sharing

* Closes #7304
- Color tweaks, normalization.

* Closes #7304
- Color tweaks, normalization.
- Search layout, contrast and font-size improvements.
- Added '+' icons to collapsed pane buttons.

* Closes #7304
- Shell head layout improvements.

* Update ColorKey for Take Snapshot Failures and Opacity labels. Also fix create menu

* Closes #7410
- CHERRY PICK FROM event-colors-7410.
- Event display approach modified to include background color.
- Theme colors modified and constrast verified via Wave a11y browser plugin.

* Closes #7304
- Set back to install Espresso theme by default.

* temporarily skip

* remove comment

* lint

* Update default colors

* update snapshot

* missed

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
2024-01-29 21:30:55 -08:00

85 lines
3.0 KiB
JavaScript

/*****************************************************************************
* Open MCT, Copyright (c) 2014-2024, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*
Tests the branding associated with the default deployment. At least the about modal for now
*/
import percySnapshot from '@percy/playwright';
import { expect, test } from '../../../avpFixtures.js';
import { VISUAL_URL } from '../../../constants.js';
//Declare the scope of the visual test
const header = '.l-shell__head';
test.describe('Visual - Header @a11y', () => {
test.beforeEach(async ({ page }) => {
//Go to baseURL and Hide Tree
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
// Wait for status bar to load
await expect(
page.getByRole('status', {
name: 'Clock Indicator'
})
).toBeInViewport();
await expect(
page.getByRole('status', {
name: 'Global Clear Indicator'
})
).toBeInViewport();
await expect(
page.getByRole('status', {
name: 'Snapshot Indicator'
})
).toBeInViewport();
});
test('header sizing', async ({ page, theme }) => {
// Click About button
await percySnapshot(page, `Header default (theme: '${theme}')`, {
scope: header
});
await page.getByLabel('Click to collapse items').click();
await percySnapshot(page, `Header Collapsed (theme: '${theme}')`, {
scope: header
});
});
test('show snapshot button', async ({ page, theme }) => {
await page.getByLabel('Take a Notebook Snapshot').click();
await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
await percySnapshot(page, `Notebook Snapshot Show button (theme: '${theme}')`, {
scope: header
});
await expect(await page.getByLabel('Show Snapshots')).toBeVisible();
});
});
// Skipping for https://github.com/nasa/openmct/issues/7421
// test.afterEach(async ({ page }, testInfo) => {
// await scanForA11yViolations(page, testInfo.title);
// });