Skip to content

🎨 Palette: [UX 개선] ScoreView 비활성화 요소 툴팁 및 접근성 개선 #701

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

Closed
seonghobae wants to merge 3 commits into from
Closed

🎨 Palette: [UX 개선] ScoreView 비활성화 요소 툴팁 및 접근성 개선 #701

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
12b32b8
🎨 Palette: [UX 개선] ScoreView 비활성화 요소 툴팁 및 접근성 개선
seonghobae Jul 26, 2026
bb1b844
🎨 Palette: [UX 개선] ScoreView 비활성화 요소 툴팁 및 접근성 개선
seonghobae Jul 26, 2026
db8caf8
🎨 Palette: [UX 개선] ScoreView 비활성화 요소 툴팁 및 접근성 개선
seonghobae Jul 26, 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
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,6 @@
## 2026-07-02 - Inline clear buttons preserve focus
**Learning:** Inline clear buttons often unmount immediately after clearing state, which can drop keyboard focus to the document body.
**Action:** Move focus back to the owning input before clearing state, and cover the behavior with a DOM focus test.
## 2024-11-20 - Ensure screen reader text isn't duplicated in tooltips
**Learning:** When creating a custom wrapper for disabled buttons to show tooltips, using `title` on the wrapper provides an accessible name. Adding an additional visually hidden `sr-only` child duplicates this text for screen readers.
**Action:** If a wrapper has a `title` attribute, do not include an additional `sr-only` text child.
Comment on lines 37 to +42
Comment on lines +41 to +42
1 change: 1 addition & 0 deletions .trivyignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ yt_dlp/extractor/vice.py
# Guarded by scripts/checks/verify_supply_chain.py and remove when upstream
# drops or patches the chain. Revisit by 2026-10-31.
GHSA-wrw7-89jp-8q8g exp:2026-10-31
services/analysis-engine/.venv/lib/python3.12/site-packages/yt_dlp/extractor/shahid.py

@coderabbitai coderabbitai Bot Jul 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

trivy fs --version
trivy fs --debug --ignorefile .trivyignore \
  --skip-dirs services/analysis-engine/.venv .

Repository: ContextualWisdomLab/bandscope

Length of output: 14358

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

printf '\n## .trivyignore\n'
cat -n .trivyignore | sed -n '1,80p'

printf '\n## trivy workflow refs\n'
rg -n --no-heading 'skip-dirs|skip-files|ignorefile|trivyignore' .github/workflows/trivy.yml .trivyignore || true

printf '\n## trivy help snippets\n'
trivy fs --help | sed -n '1,220p'

Repository: ContextualWisdomLab/bandscope

Length of output: 16069

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

python3 - <<'PY'
from pathlib import Path
p = Path('.trivyignore')
for i, line in enumerate(p.read_text().splitlines(), 1):
    if 'services/analysis-engine/.venv/lib/python3.12/site-packages/yt_dlp/extractor/shahid.py' in line:
        print(f'line={i}: {line}')
PY

Repository: ContextualWisdomLab/bandscope

Length of output: 358

🌐 Web query:

Trivy .trivyignore file path ignore skip-files skip-dirs documentation

💡 Result:

In Trivy, there is a fundamental distinction between ignoring detected security findings (filtering) and preventing Trivy from scanning specific files or directories altogether (skipping) [1][2]. Filtering Findings (.trivyignore) The.trivyignore file is used to suppress or ignore vulnerabilities, misconfigurations, secrets, or licenses that have already been detected by Trivy [3]. 1. Legacy Format (.trivyignore): A simple text file containing a list of vulnerability IDs or other identifiers to be ignored [3][4]. 2. Structured Format (.trivyignore.yaml): An experimental but more powerful YAML-based format [3][5]. It allows for granular control by specifying paths, package URLs (PURLs), expiration dates, and reasons for ignoring specific findings [3][6]. - Example: vulnerabilities: - id: CVE-2021-12345 paths: - "package.json" statement: "Accepted risk" - Because this feature is experimental, you must explicitly specify the path to your YAML file using the --ignorefile flag (e.g., trivy --ignorefile.trivyignore.yaml...) [3][5]. Otherwise, Trivy defaults to the standard.trivyignore file [7]. Skipping Files and Directories If you want to prevent Trivy from scanning specific files or directories entirely—thereby improving performance and reducing noise—you use the --skip-files and --skip-dirs flags [1][8]. - --skip-files: Used to exclude specific files [1][9]. - --skip-dirs: Used to exclude entire directories [1][9]. - Configuration: These flags accept glob patterns (using "doublestar" syntax) and can also be defined in a Trivy YAML configuration file [1][2][8]. - Example (CLI): trivy image --skip-files "./testdata//bar" --skip-dirs "/.terraform". [1][2] - Example (YAML Config): scan: skip-files: - "testdata//bar" skip-dirs: - "/.terraform" Summary Table Feature | Purpose | Mechanism | --- | --- | --- |.trivyignore | Suppress detected findings | File (.trivyignore or.trivyignore.yaml) | --skip-files/dirs | Prevent scanning of specific paths | CLI flags or YAML config | For further details, consult the official Trivy documentation on Filtering [3] and Skipping files [1].

Citations:

🌐 Web query:

Trivy legacy .trivyignore path entries ignored findings file path support docs

💡 Result:

Trivy supports two primary types of ignore files: the legacy.trivyignore file and the newer, experimental.trivyignore.yaml file [1][2]. The legacy.trivyignore file supports a list of vulnerability IDs (or other finding IDs) to ignore, but it does not natively support ignoring specific file paths [1]. The.trivyignore.yaml file, introduced to provide more granular control, does support ignoring specific file paths [1]. Within a.trivyignore.yaml file, you can define rules under sections such as vulnerabilities or misconfigurations, where each rule includes an id and a paths field (a string array of file paths to ignore) [1][2]. Key details regarding this support include: 1. Experimental Status: The.trivyignore.yaml format is considered experimental [1][2]. Because of this, it is not loaded automatically and must be explicitly specified using the --ignorefile command-line flag [1][2]. 2. File Parsing: If the file specified by --ignorefile has a.yml or.yaml extension, Trivy parses it as a YAML configuration [2]. If the extension is not.yml or.yaml, it is treated as a legacy.trivyignore file [2]. 3. Configuration: In.trivyignore.yaml, if the paths field is omitted, the ignore rule applies to all files; if paths are specified, the rule applies only to those listed files [1]. For users working with Terraform, Trivy also supports inline comments (e.g., #trivy:ignore:ID) to ignore misconfigurations at the resource level, which acts as an alternative to directory-wide ignores [3].

Citations:

🌐 Web query:

site:trivy.dev .trivyignore paths ignorefile Trivy file path

💡 Result:

In Trivy, the.trivyignore file is used to filter out specific vulnerabilities, misconfigurations, secrets, or licenses from your scan results [1]. It is important to distinguish between using an ignore file to filter results and using flags to skip entire files or directories from being scanned: 1. Filtering Findings with.trivyignore: You can use.trivyignore (text format) or.trivyignore.yaml (YAML format) to ignore specific findings [1]. - The standard.trivyignore file typically contains a list of vulnerability IDs or other identifiers to be ignored. - The.trivyignore.yaml file allows for more granular control, such as specifying paths within an application where a specific finding should be ignored [1]. - While Trivy may load.trivyignore automatically in some contexts, experimental features or custom file names require the use of the --ignorefile flag to specify the path to your ignore file [1][2]. Example: trivy image --ignorefile./.trivyignore.yaml python:3.9.16-alpine3.16 [1] 2. Skipping Files/Directories during Scan: If you want to prevent Trivy from scanning specific files or directories entirely, you should use the --skip-files or --skip-dirs flags instead of an ignore file [3][4]. These flags accept glob patterns to target specific files or directories at any depth [4]. Configuration Summary: - Default behavior: Trivy searches for a configuration file (often named trivy.yaml), where you can set the ignorefile path under the ignorefile key [2][5]. - CLI flag: Use --ignorefile to explicitly point to your ignore file [1][2].

Citations:

🌐 Web query:

Trivy ignore file path entries .trivyignore yaml filtering docs path pattern

💡 Result:

To ignore specific file paths during a Trivy scan, you have two primary mechanisms depending on your goal: suppressing specific security findings (like a CVE) or skipping the scanning of files and directories entirely [1][2]. 1. Suppressing Findings with.trivyignore.yaml If you want to allow a specific vulnerability, misconfiguration, or secret only when found in certain files, you should use the.trivyignore.yaml file [1]. - Structure: This file allows you to define ignored IDs and restrict them to specific paths [1][3]. - Example: vulnerabilities: - id: CVE-2022-40897 paths: - "usr/local/lib/python3.9/site-packages/setuptools-58.1.0.dist-info/METADATA" statement: "Accept the risk for this specific file" - Note: This feature is currently experimental. You must explicitly point to the file using the --ignorefile flag (e.g., --ignorefile.trivyignore.yaml) [1][4]. 2. Skipping Files/Directories Entirely If you want Trivy to ignore scanning specific files or directories altogether, use the --skip-files and --skip-dirs flags [2][5]. - Usage: These flags support glob patterns based on the "doublestar" syntax [2][5]. - CLI Example: trivy image --skip-files "./testdata//bar" --skip-dirs "/.terraform". - YAML Configuration: You can also define these in your Trivy configuration file: scan: skip-files: - "testdata//bar" skip-dirs: - "/.terraform" - Behavior: Trivy will skip scanning any files or directories that match these patterns [2][6]. Key Distinction: - Use.trivyignore.yaml when the file should be scanned, but specific findings within it should be ignored/suppressed [1]. - Use --skip-files or --skip-dirs when you want Trivy to bypass the file or directory entirely during the scanning process [2][5].

Citations:

🌐 Web query:

site:trivy.dev legacy .trivyignore file path ignore specific paths not supported

💡 Result:

It is correct that the legacy.trivyignore file does not support ignoring specific file paths; it is designed primarily for ignoring vulnerability IDs [1]. To ignore specific file paths in Trivy, you should use the skip-files or skip-dirs functionality instead of.trivyignore [2][3]. There are two main ways to achieve this: 1. CLI Flags: You can use the --skip-files or --skip-dirs flags directly in your command [2][4]. These flags support glob patterns, allowing for flexible path exclusion [3][5]. Example: trivy fs --skip-files "./foo//*.tf". [3] 2. Configuration File: You can specify these exclusions in a Trivy configuration file (typically in YAML format) under the skip-files or skip-dirs keys [3][5]. If you need to filter findings based on both vulnerability IDs and specific file paths, Trivy provides an experimental.trivyignore.yaml format that supports this [1]. Unlike the legacy.trivyignore, the.trivyignore.yaml file allows you to define a paths field under specific vulnerability IDs to exclude those files only for that finding [1]. Since this feature is experimental, you must explicitly point to this file using the --ignorefile flag [1].

Citations:

🌐 Web query:

site:github.com/aquasecurity/trivy .trivyignore path specific file ignore

💡 Result:

To ignore findings in a specific file or path in Trivy, you can use the.trivyignore.yaml configuration file or command-line flags, depending on your goal. Using.trivyignore.yaml The.trivyignore.yaml file allows you to specify paths to ignore for particular vulnerability, misconfiguration, secret, or license IDs [1][2]. To use this feature, you must explicitly specify the file path with the --ignorefile flag (e.g., trivy --ignorefile.trivyignore.yaml scan...) [1][2]. Example configuration: vulnerabilities: - id: CVE-2023-30861 paths: - "path/to/specific/file.lock" misconfigurations: - id: AVD-DS-0002 paths: - "path/to/directory/" In this structure, the paths field accepts a list of file paths [2]. If paths is omitted, the ignore rule applies to all files [2]. Recent updates have also introduced the ability to omit the id field in some contexts to ignore all findings matching specific paths [3]. Skipping Files Entirely If your goal is to prevent Trivy from scanning a file or directory at all, use the --skip-files or --skip-dirs flags [4]. These support glob patterns for more flexible matching [4]. Example usage: trivy image --skip-files "./path/to/file.txt". trivy config --skip-dirs "./path/to/directory". Note that skipping files is different from filtering/ignoring findings [4]. Skipping prevents the scanner from analyzing the target, while ignoring filters out results that have already been detected [4][5].

Citations:

.trivyignore:21은 삭제하세요.
legacy .trivyignore에는 파일 경로가 아니라 finding ID만 들어가므로 이 항목은 효과가 없습니다. 전체 .venv는 이미 skip-dirs로 제외되고 있으니 중복이며, 파일 단위 제외가 필요하면 skip-files 또는 .trivyignore.yaml로 옮기세요.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.trivyignore at line 21, Remove the yt_dlp/shahid.py path entry from
.trivyignore; the legacy file should contain only finding IDs, and the virtual
environment is already excluded via skip-dirs.

3 changes: 2 additions & 1 deletion apps/desktop/src/features/score/ScoreView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,9 @@ describe("ScoreView", () => {

expect(screen.getByText("Scores attach to the active analysis project.")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Add score" })).toBeDisabled();
expect(screen.getByRole("button", { name: "Open score: opener.pdf" })).toBeDisabled();
expect(screen.getByRole("button", { name: "Open score: opener.pdf" })).toHaveAttribute("aria-disabled", "true");
expect(screen.getByRole("button", { name: "Remove: opener.pdf" })).toBeDisabled();
expect(screen.getAllByTitle("scoreNavDisabledHint")).toHaveLength(2);
Comment on lines +99 to +101

@coderabbitai coderabbitai Bot Jul 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

테스트를 실제 힌트 문자열과 접근성 계약에 고정하세요.

createTranslator mock에 scoreNavDisabledHint가 없어 fallback으로 키 이름인 "scoreNavDisabledHint"가 반환됩니다. 따라서 번역이 누락되거나 wrapper가 스크린 리더에 제대로 노출되지 않아도 title 두 개만 존재하면 테스트가 통과합니다.

mock에 실제 힌트 문자열을 추가하고, title 개수 대신 명시적인 aria-describedby/role/name 및 키보드 포커스 동작을 검증하세요.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/desktop/src/features/score/ScoreView.test.tsx` around lines 99 - 101,
Update the ScoreView test’s createTranslator mock to provide the real
scoreNavDisabledHint text, then replace the title-count assertion with explicit
checks that each disabled navigation control exposes the hint through the
expected aria-describedby relationship and accessible role/name. Also verify the
disabled controls retain the required keyboard-focus behavior.


fireEvent.click(screen.getByRole("button", { name: "Open score: opener.pdf" }));
expect(mockInvoke).not.toHaveBeenCalled();
Expand Down
39 changes: 27 additions & 12 deletions apps/desktop/src/features/score/ScoreView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,24 +184,39 @@ export function ScoreView({ song, projectId, onSongUpdate }: ScoreViewProps) {
<button
type="button"
onClick={projectId ? () => void openAttachment(projectId, attachment) : undefined}
disabled={!projectId}
aria-disabled={!projectId ? "true" : undefined}
title={!projectId ? t("scoreNavDisabledHint") : undefined}
aria-current={selected?.id === attachment.id ? "true" : undefined}
aria-label={`${t("scoreOpen")}: ${attachment.fileName}`}
className="flex min-h-10 min-w-0 flex-1 items-center gap-2 text-left text-sm font-semibold text-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 disabled:cursor-not-allowed disabled:opacity-60"
className="flex min-h-10 min-w-0 flex-1 items-center gap-2 text-left text-sm font-semibold text-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 aria-disabled:cursor-not-allowed aria-disabled:opacity-60"
>
<FileMusic className="size-4 shrink-0 text-cyan-300" aria-hidden="true" />
<span className="truncate">{attachment.fileName}</span>
</button>
<Button
variant="outline"
size="icon"
onClick={projectId ? () => void handleRemove(projectId, attachment) : undefined}
disabled={!projectId}
aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"
>
<Trash2 className="size-4" aria-hidden="true" />
</Button>
{!projectId ? (
<span tabIndex={0} title={t("scoreNavDisabledHint")} className="inline-flex">
<Button
variant="outline"
size="icon"
disabled={true}
aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"
>
<Trash2 className="size-4" aria-hidden="true" />
</Button>
</span>
) : (
<Button
variant="outline"
size="icon"
onClick={() => void handleRemove(projectId, attachment)}
title={`${t("scoreRemove")}: ${attachment.fileName}`}
aria-label={`${t("scoreRemove")}: ${attachment.fileName}`}
className="size-10 border-rose-300/25 text-rose-200 hover:bg-rose-400/10"
>
<Trash2 className="size-4" aria-hidden="true" />
</Button>
)}
Comment on lines +196 to +219
</li>
))}
</ul>
Expand Down
22 changes: 11 additions & 11 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions services/analysis-engine/uv.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading