fix(game-ui): 툴팁 점선 장식을 제거한다

툴팁의 hover와 키보드 focus 동작은 유지하면서 게임 정보에 반복되던 점선·파선 밑줄을 제거한다. 실제 Chromium에서 내정보, 장수 일람, 국가 전략, NPC 선택 흐름을 검증한다.
This commit is contained in:
2026-08-21 17:13:32 +00:00
parent b82492e6d1
commit 4a61d7ed92
9 changed files with 11 additions and 7 deletions
@@ -629,6 +629,10 @@ test('nation directory reuses only the public general-directory row on hover and
await expect(preview.locator('[data-general-card-id="10"]')).toContainText('대담');
await expect(preview.locator('[data-directory-tooltip="card-special-domestic-10"]')).toContainText('상재');
await expect(preview.locator('[data-directory-tooltip="card-special-war-10"]')).toContainText('귀모');
await expect(preview.locator('[data-directory-tooltip="card-special-domestic-10"]')).toHaveCSS(
'text-decoration-line',
'none'
);
await expect(preview).not.toContainText('user-');
await expect(preview).not.toContainText('secret');
@@ -1429,6 +1429,7 @@ test('내 정보 항목과 국가 성향은 HTML 리치 툴팁을 마우스와
const showWithMouse = async (testId: string, expectedTexts: readonly string[]) => {
const trigger = page.locator(`[data-rich-tooltip="${testId}"]`);
await expect(trigger).toHaveAttribute('tabindex', '0');
await expect(trigger).toHaveCSS('text-decoration-line', 'none');
await trigger.hover();
await expect(visibleTooltip).toHaveCount(1);
await expect(visibleTooltip).toHaveAttribute('role', 'tooltip');
@@ -2106,6 +2106,7 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
expect(Math.max(...nationRowHeights) - Math.min(...nationRowHeights)).toBeLessThanOrEqual(0.01);
const strategicCell = nationCard.locator('.strategic');
const strategicTooltip = strategicCell.getByRole('tooltip');
await expect(strategicCell).toHaveCSS('text-decoration-line', 'none');
await expect(strategicTooltip).toBeHidden();
await strategicCell.hover();
await expect(strategicTooltip).toBeVisible();
@@ -266,6 +266,7 @@ test('renders Ref-shaped token cards, preserves keep cooldown and retries posses
});
const tooltip = page.locator('.npc-tooltip').first();
const tooltipPopup = tooltip.getByRole('tooltip');
await expect(tooltip).toHaveCSS('text-decoration-line', 'none');
await expect(tooltipPopup).toBeHidden();
await tooltip.hover();
await expect(tooltipPopup).toBeVisible();
@@ -29,8 +29,6 @@ defineProps<{
}
.directory-tooltip--enabled {
cursor: help;
text-decoration: underline dotted rgb(150 210 255 / 85%);
text-underline-offset: 2px;
}
.directory-tooltip--enabled:focus-visible {
border-radius: 2px;
@@ -284,7 +284,6 @@ const displayChiefName = (chief: NationChief | undefined): string => {
.strategic.has-tooltip {
overflow: visible;
text-decoration: underline dashed red;
}
.cooldown-tooltip {
@@ -97,8 +97,6 @@ watch(
.rich-tooltip-trigger--enabled {
cursor: help;
text-decoration: underline dotted rgb(150 210 255 / 85%);
text-underline-offset: 2px;
}
.rich-tooltip-trigger--enabled:focus-visible {
-1
View File
@@ -1733,7 +1733,6 @@ onUnmounted(() => {
.npc-tooltip {
position: relative;
cursor: help;
text-decoration: underline dotted;
}
.npc-tooltip [role='tooltip'] {
+4 -1
View File
@@ -36,7 +36,10 @@ available sort keys and placement. NPC·암행부·세력도시는 Ref의 고정
`내림차순 → 오름차순 → 해제`를 순환하고, 여러 열의 방향과 우선순위를 scoped
SFC indicator로 표시합니다. 장수 일람의 성격·특기·부상 설명은 많은 행에서
eager popup instance를 만들지 않는 `DirectoryTooltip.vue` scoped CSS가 소유하며,
mobile에서는 viewport 가장자리 8px 안의 고정 설명판으로 전환합니다.
mobile에서는 viewport 가장자리 8px 안의 고정 설명판으로 전환합니다. 게임 내
tooltip trigger는 hover/focus 동작과 `cursor: help`를 유지하되, tooltip이 있는 모든
텍스트에 점선 밑줄을 반복하지 않습니다. keyboard `focus-visible` outline은 별도의
접근성 상태로 유지합니다.
## Button composition