브라우저 로컬 자동저장 사용 중
diff --git a/styles.css b/styles.css
index 9d715f00..b5e64e96 100644
--- a/styles.css
+++ b/styles.css
@@ -170,13 +170,20 @@ button {
letter-spacing: -0.02em;
}
+.meta-description {
+ color: var(--text-muted);
+ font-size: 0.75rem;
+ line-height: 1.4;
+}
+
.accent-card {
color: #fff;
border: none;
}
-.accent-card .meta-label {
- color: rgba(255, 255, 255, 0.9);
+.accent-card .meta-label,
+.accent-card .meta-description {
+ color: rgba(255, 255, 255, 0.92);
}
.accent-card strong {
@@ -184,12 +191,12 @@ button {
}
.plan-card {
- background: linear-gradient(135deg, #1e40af, #3b82f6);
+ background: linear-gradient(135deg, #1e40af, #2563eb);
box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.25);
}
.actual-card {
- background: linear-gradient(135deg, #047857, #10b981);
+ background: linear-gradient(135deg, #065f46, #047857);
box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.25);
}
diff --git a/tests/e2e/metric-card-explanations.spec.js b/tests/e2e/metric-card-explanations.spec.js
new file mode 100644
index 00000000..96efb999
--- /dev/null
+++ b/tests/e2e/metric-card-explanations.spec.js
@@ -0,0 +1,95 @@
+import { test, expect } from '@playwright/test';
+
+const metricCases = [
+ {
+ valueTestId: 'summary-total-days',
+ description: '프로젝트의 작업 기간(일수) 합계입니다.',
+ },
+ {
+ valueTestId: 'summary-planned-progress',
+ description: '기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.',
+ },
+ {
+ valueTestId: 'summary-actual-progress',
+ description: '기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.',
+ },
+];
+
+function relativeLuminance([red, green, blue]) {
+ const channels = [red, green, blue].map((channel) => {
+ const value = channel / 255;
+ return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+ });
+ return (0.2126 * channels[0]) + (0.7152 * channels[1]) + (0.0722 * channels[2]);
+}
+
+function contrastRatio(foreground, background) {
+ const foregroundLuminance = relativeLuminance(foreground);
+ const backgroundLuminance = relativeLuminance(background);
+ return (Math.max(foregroundLuminance, backgroundLuminance) + 0.05)
+ / (Math.min(foregroundLuminance, backgroundLuminance) + 0.05);
+}
+
+function blendChannel(foreground, background, alpha) {
+ return (alpha * foreground) + ((1 - alpha) * background);
+}
+
+function blendRgb(foreground, background, alpha) {
+ return foreground.map((channel, index) => blendChannel(channel, background[index], alpha));
+}
+
+function interpolateRgb(start, end, progress) {
+ return start.map((channel, index) => channel + ((end[index] - channel) * progress));
+}
+
+test.describe('summary metric explanations', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('./');
+ });
+
+ for (const { valueTestId, description } of metricCases) {
+ test(`keeps ${valueTestId} help visible without a synthetic keyboard stop`, async ({ page }) => {
+ const value = page.getByTestId(valueTestId);
+ const card = value.locator('..');
+
+ await expect(value).toBeVisible();
+ await expect(card.getByText(description, { exact: true })).toBeVisible();
+ await expect(card).not.toHaveAttribute('tabindex');
+ await expect(card).not.toHaveAttribute('role');
+ await expect(card).not.toHaveAttribute('title');
+ });
+ }
+
+ for (const valueTestId of ['summary-planned-progress', 'summary-actual-progress']) {
+ test(`${valueTestId} explanation keeps WCAG AA text contrast across its gradient`, async ({ page }) => {
+ const card = page.getByTestId(valueTestId).locator('..');
+ const styles = await card.evaluate((element) => {
+ const descriptionElement = element.querySelector('.meta-description');
+ return {
+ backgroundImage: getComputedStyle(element).backgroundImage,
+ color: getComputedStyle(descriptionElement).color,
+ };
+ });
+
+ const colorMatch = styles.color.match(/rgba?\(\s*([\d.]+)[, ]+\s*([\d.]+)[, ]+\s*([\d.]+)(?:\s*[,/]\s*([\d.]+))?\s*\)/i);
+ const gradientMatches = [...styles.backgroundImage.matchAll(/rgb\(\s*([\d.]+)[, ]+\s*([\d.]+)[, ]+\s*([\d.]+)\s*\)/gi)];
+
+ expect(colorMatch, `expected an rgb/rgba description color, got ${styles.color}`).not.toBeNull();
+ expect(gradientMatches.length, `expected two gradient color stops, got ${styles.backgroundImage}`).toBeGreaterThanOrEqual(2);
+
+ const foreground = colorMatch.slice(1, 4).map(Number);
+ const foregroundAlpha = colorMatch[4] === undefined ? 1 : Number(colorMatch[4]);
+ const start = gradientMatches[0].slice(1, 4).map(Number);
+ const end = gradientMatches.at(-1).slice(1, 4).map(Number);
+ let minimumContrast = Number.POSITIVE_INFINITY;
+
+ for (let sample = 0; sample <= 20; sample += 1) {
+ const background = interpolateRgb(start, end, sample / 20);
+ const renderedForeground = blendRgb(foreground, background, foregroundAlpha);
+ minimumContrast = Math.min(minimumContrast, contrastRatio(renderedForeground, background));
+ }
+
+ expect(minimumContrast).toBeGreaterThanOrEqual(4.5);
+ });
+ }
+});
diff --git a/tests/e2e/project-title-literal.spec.js b/tests/e2e/project-title-literal.spec.js
new file mode 100644
index 00000000..5eadf63c
--- /dev/null
+++ b/tests/e2e/project-title-literal.spec.js
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+const PROJECT_NAME = `R&D
& "Review" 'Q3'`;
+
+test('keeps the project name literal in the browser title', async ({ page }) => {
+ await page.goto('./');
+
+ await page.getByTestId('project-name-input').fill(PROJECT_NAME);
+ await page.getByTestId('project-name-input').blur();
+
+ await expect(page).toHaveTitle(`${PROJECT_NAME} - ScopeWeave Planner`);
+});
diff --git a/tests/e2e/scopeweave.spec.js b/tests/e2e/scopeweave.spec.js
index dc0cda8d..b152568b 100644
--- a/tests/e2e/scopeweave.spec.js
+++ b/tests/e2e/scopeweave.spec.js
@@ -1290,13 +1290,28 @@ test.describe('ScopeWeave Planner - Palette UX Enhancements', () => {
page.off('dialog', acceptHandler);
});
- test('adds helpful tooltips and ARIA attributes for progress cards and gantt buttons', async ({ page }) => {
+ test('adds visible metric help and ARIA attributes for gantt controls', async ({ page }) => {
await page.goto('./');
- // Verify progress card tooltips
- await expect(page.locator('.meta-value-card').first()).toHaveAttribute('title', '프로젝트의 작업 기간(일수) 합계입니다.');
- await expect(page.locator('.plan-card')).toHaveAttribute('title', '기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.');
- await expect(page.locator('.actual-card')).toHaveAttribute('title', '기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.');
+ // Verify progress card explanations are visible without native tooltips.
+ const metricCards = [
+ {
+ card: page.locator('.meta-value-card').first(),
+ description: '프로젝트의 작업 기간(일수) 합계입니다.'
+ },
+ {
+ card: page.locator('.plan-card'),
+ description: '기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.'
+ },
+ {
+ card: page.locator('.actual-card'),
+ description: '기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.'
+ }
+ ];
+ for (const { card, description } of metricCards) {
+ await expect(card.getByText(description, { exact: true })).toBeVisible();
+ await expect(card).not.toHaveAttribute('title');
+ }
// Verify sync status ARIA attributes
const syncStatus = page.locator('#sync-status');