Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix constrast for accessibility #7315

Merged
merged 30 commits into from
Jan 30, 2024
Merged

Fix constrast for accessibility #7315

merged 30 commits into from
Jan 30, 2024

Conversation

charlesh88
Copy link
Contributor

@charlesh88 charlesh88 commented Dec 19, 2023

Closes #7304

Describe your changes:

  • Theme constants changed to pass all WCAG AA level a11y test requirements.
  • Event display approach modified to include background colors for constrast reasons.
  • Theme colors modified and constrast verified via Wave a11y browser plugin.

@unlikelyzero to investigate:

  • add a header test
  • wonky resolution of 1440p
  • we need to generate a baseline with all browsers before merge
  • understand why we gained vertical screen real estate on all views
  • Telemetry Table

All Submissions:

  • Have you followed the guidelines in our Contributing document?
  • Have you checked to ensure there aren't other open Pull Requests for the same update/change?
  • Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

  • Changes address original issue?
  • Tests included and/or updated with changes?
  • Has this been smoke tested?
  • Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
  • Have you associated a milestone with this PR? Note: leave blank if unsure.
  • Is this a breaking change to be called out in the release notes?
  • Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

  • Changes appear to address issue?
  • Reviewer has tested changes by following the provided instructions?
  • Changes appear not to be breaking changes?
  • Appropriate automated tests included?
  • Code style and in-line documentation are appropriate?

charlesh88 and others added 4 commits December 18, 2023 15:06
- 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.
- 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!
Copy link

deploysentinel bot commented Dec 19, 2023

Current Playwright Test Results Summary

✅ 161 Passing - ❌ 2 Failing - ⚠️ 5 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 12/21/2023 03:53:51am UTC)

Run Details

Running Job e2e-stable on CircleCI

Commit: eca4c19

Started: 12/21/2023 03:48:51am UTC

❌ Failures

📄   functional/plugins/plot/logPlot.e2e.spec.js • 1 Failure

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Log plot tests Log Plot ticks are functionally correct in regular and log mode and after refresh
Initial Attempt
Error: Test timeout of 180000ms exceeded.
Test timeout of 180000ms exceeded.
3.45% (3) 3 / 87 runs
failed over last 7 days
24.14% (21) 21 / 87 runs
flaked over last 7 days

📄   functional/plugins/plot/autoscale.e2e.spec.js • 1 Failure

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Autoscale User can set autoscale with a valid range @snapshot
Retry 2Retry 1Initial Attempt
Error: Screenshot comparison failed:...
Screenshot comparison failed:

  Expected an image 718px by 555px, received 718px by 557px. 2441 pixels (ratio 0.01 of all image pixels) are different.

Expected: /root/project/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png
Received: /root/project/test-results/functional-plugins-plot-autoscale.e2e-Autoscale-User-can-set-autoscale-with-a-valid-range-snapshot-chrome-retry2/autoscale-canvas-prepan-actual.png
    Diff: /root/project/test-results/functional-plugins-plot-autoscale.e2e-Autoscale-User-can-set-autoscale-with-a-valid-range-snapshot-chrome-retry2/autoscale-canvas-prepan-diff.png

5.95% (5) 5 / 84 runs
failed over last 7 days
0% (0) 0 / 84 runs
flaked over last 7 days

⚠️ Flakes

📄   functional/plugins/imagery/exampleImagery.e2e.spec.js • 1 Flake

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Example Imagery Object Can use Mouse Wheel to zoom in and out of latest image
Retry 1Initial Attempt
0% (0) 0 / 87 runs
failed over last 7 days
28.74% (25) 25 / 87 runs
flaked over last 7 days

📄   functional/plugins/notebook/restrictedNotebook.e2e.spec.js • 2 Flakes

Top 1 Common Error Messages

null

2 Test Cases Affected

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Restricted Notebook with a page locked and with an embed @addinit Allows embeds to be deleted if page unlocked @addinit
Retry 1Initial Attempt
0% (0) 0 / 85 runs
failed over last 7 days
48.24% (41) 41 / 85 runs
flaked over last 7 days
Restricted Notebook with a page locked and with an embed @addinit Disallows embeds to be deleted if page locked @addinit
Retry 1Initial Attempt
2.35% (2) 2 / 85 runs
failed over last 7 days
38.82% (33) 33 / 85 runs
flaked over last 7 days

📄   functional/plugins/conditionSet/conditionSet.e2e.spec.js • 1 Flake

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Basic Condition Set Use ConditionSet has correct outputs when telemetry is and is not available
Retry 1Initial Attempt
0% (0) 0 / 96 runs
failed over last 7 days
2.08% (2) 2 / 96 runs
flaked over last 7 days

📄   functional/planning/timelist.e2e.spec.js • 1 Flake

Test Case Results

Test Case Last 7 days Failures Last 7 days Flakes
Time List Create a Time List, add a single Plan to it and verify all the activities are displayed with no milliseconds
Retry 1Initial Attempt
2.94% (3) 3 / 102 runs
failed over last 7 days
56.86% (58) 58 / 102 runs
flaked over last 7 days

View Detailed Build Results


Copy link

codecov bot commented Dec 19, 2023

Codecov Report

Attention: 4 lines in your changes are missing coverage. Please review.

Comparison is base (f8d936a) 55.62% compared to head (4d5296f) 55.58%.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7315      +/-   ##
==========================================
- Coverage   55.62%   55.58%   -0.05%     
==========================================
  Files         668      668              
  Lines       26704    26704              
  Branches     2585     2585              
==========================================
- Hits        14855    14844      -11     
- Misses      11136    11148      +12     
+ Partials      713      712       -1     
Flag Coverage Δ *Carryforward flag
e2e-full 41.90% <ø> (+0.53%) ⬆️ Carriedforward from 0c9a73b
e2e-stable 59.38% <ø> (-0.16%) ⬇️
unit 48.65% <76.47%> (ø)

*This pull request uses carry forward flags. Click here to find out more.

Files Coverage Δ
src/ui/layout/search/GrandSearch.vue 70.49% <100.00%> (ø)
src/ui/layout/search/SearchResultsDropDown.vue 76.47% <75.00%> (ø)

... and 8 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f8d936a...4d5296f. Read the comment docs.

unlikelyzero and others added 2 commits December 19, 2023 16:05
- 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!
@@ -60,7 +60,7 @@ exports.scanForA11yViolations = async function (page, testCaseName, options = {}
const builder = new AxeBuilder({ page });
builder.withTags(['wcag2aa']);
// https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
builder.disableRules(['color-contrast']);
//builder.disableRules(['color-contrast']);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will eventually be deleted

- Reorganize CSS files for more uniformity.
- Color tweaks, normalization.
- Color tweaks, normalization.
- Search layout, contrast and font-size improvements.
- Added '+' icons to collapsed pane buttons.
- Shell head layout improvements.
@unlikelyzero unlikelyzero added this to the Target:3.3.0 milestone Dec 21, 2023
@unlikelyzero
Copy link
Collaborator

unlikelyzero commented Dec 21, 2023

@charlesh88 the following items are not actually marked as disabled in the DOM:

  1. Create Button in editing mode
  2. Tree Item when in editing mode
Screenshot 2023-12-20 at 9 36 00 PM

@charlesh88 charlesh88 marked this pull request as ready for review January 10, 2024 18:16
@charlesh88 charlesh88 changed the title Fix contrast for accessibility Fix constrast for accessibility Jan 16, 2024
@unlikelyzero unlikelyzero modified the milestones: Target:3.3.0, Target:4.0.0 Jan 17, 2024
@shefalijoshi
Copy link
Contributor

Not needed for Build 9, but deferring this will incur risk for future merges.

@akhenry
Copy link
Contributor

akhenry commented Jan 23, 2024

@unlikelyzero What do we need to do to get this merged?

charlesh88 and others added 8 commits January 24, 2024 16:17
- Merge latest master, resolve conflicts.
- Fix expand pane button issue in mobile.
- 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.
- Set back to install Espresso theme by default.
@unlikelyzero unlikelyzero added pr:e2e:couchdb npm run test:e2e:couchdb pr:e2e:perf Trigger perf tests labels Jan 30, 2024
@github-actions github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 30, 2024
@github-actions github-actions bot removed the pr:e2e:perf Trigger perf tests label Jan 30, 2024
@unlikelyzero unlikelyzero merged commit 068ac48 into master Jan 30, 2024
30 of 31 checks passed
@unlikelyzero unlikelyzero deleted the fix-constrast branch January 30, 2024 05:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[a11y] Address contrast-comparison violations in wcag2aa report for espresso
4 participants