Skip to content

Use a warning icon when there are accessiblity warnings #1274

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.

Sign up for GitHub

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

Open
StevenClontz wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Use a warning icon when there are accessiblity warnings #1274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
15c79c1
Use a warning icon when there are accessiblity warnings
StevenClontz Jun 3, 2026
dc3672e
make warning color orange
StevenClontz Jun 4, 2026
4966977
clearer "Accessibility Concerns" vs "WCAG" jargon
StevenClontz Jun 4, 2026
40cc5c9
update test to use new Accessibility Concerns text
StevenClontz Jun 4, 2026
a028e4e
implement review suggestions
StevenClontz Jun 27, 2026
0953572
lint
StevenClontz Jun 28, 2026
a1f0642
fix tests
StevenClontz Jun 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions packages/doenetml/src/EditorViewer/AccessibilityStatusButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { IoAccessibility } from "react-icons/io5";
import { IoAccessibility, IoWarningSharp } from "react-icons/io5";

/**
* Returns the tooltip text for the accessibility status button.
Expand Down Expand Up @@ -72,7 +72,9 @@ export function AccessibilityStatusButton({
className={`accessibility-status-button ${
accessibilityLevel1Count > 0
? "has-level-1-issues"
: "no-level-1-issues"
: accessibilityLevel2Count > 0
? "has-level-2-issues"
: "no-accessibility-issues"
}`}
onClick={onToggle}
title={getAccessibilityStatusTitle({
Expand All @@ -87,9 +89,14 @@ export function AccessibilityStatusButton({
})}
>
{accessibilityLevel1Count > 0 ? (
<>
<IoWarningSharp />
<span>Accessibility Errors</span>
</>
) : accessibilityLevel2Count > 0 ? (
<>
<IoAccessibility />
<span>WCAG</span>
<span>Accessibility Concerns</span>
</>
) : (
<IoAccessibility />
Expand Down
14 changes: 10 additions & 4 deletions packages/doenetml/src/EditorViewer/editor-viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,12 +334,18 @@
}

.viewer-panel .accessibility-status-button.has-level-1-issues {
background: #f5f3ff;
color: #5b21b6;
box-shadow: inset 0 0 0 1px #8b5cf6;
background: #fff6f3;
color: #e68938;
box-shadow: inset 0 0 0 1px #ba6520;
}

.viewer-panel .accessibility-status-button.has-level-2-issues {
background: #fefff3;
color: #e6e338;
box-shadow: inset 0 0 0 1px #bab220;
}

.viewer-panel .accessibility-status-button.no-level-1-issues {
.viewer-panel .accessibility-status-button.no-accessibility-issues {
background: #ecfdf3;
color: #027a48;
box-shadow: inset 0 0 0 1px #6ce9a6;
Expand Down
4 changes: 2 additions & 2 deletions packages/test-cypress/cypress/e2e/EditorViewer/editorViewerAccessibilityReport.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ describe(
);
cy.get(".accessibility-status-button.has-level-1-issues").should(
"contain.text",
"WCAG",
"Accessibility Errors",
);
cy.get(".accessibility-status-button")
.invoke("attr", "title")
Expand All @@ -78,7 +78,7 @@ describe(
cy.get(".accessibility-status-button.has-level-1-issues").should(
"not.exist",
);
cy.get(".accessibility-status-button.no-level-1-issues").should(
cy.get(".accessibility-status-button.accessibility-issues").should(
"exist",
);
cy.get(".accessibility-status-button")
Expand Down
Loading