Skip to content

🎨 Palette: Accessible Interaction Polish #36

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

Merged
Sumit-5002 merged 1 commit into from
Apr 1, 2026
Merged

🎨 Palette: Accessible Interaction Polish #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 8 additions & 0 deletions src/features/auth/AuthPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ function AuthPage({ initialMode = 'login' }) {
<input
type="text"
placeholder="Full Name"
aria-label="Full Name"
required
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
/>
Expand All @@ -157,6 +158,7 @@ function AuthPage({ initialMode = 'login' }) {
<input
type="email"
placeholder="work@email.com"
aria-label="Email Address"
required
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
Expand All @@ -166,13 +168,15 @@ function AuthPage({ initialMode = 'login' }) {
<input
type={showPassword ? "text" : "password"}
placeholder="Password"
aria-label="Password"
required
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
/>
<button
type="button"
className="password-toggle"
onClick={() => setShowPassword(!showPassword)}
aria-label={showPassword ? "Hide password" : "Show password"}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
Expand All @@ -186,6 +190,7 @@ function AuthPage({ initialMode = 'login' }) {
required
onChange={(e) => setFormData({ ...formData, role: e.target.value })}
defaultValue=""
aria-label="Select your Professional Role"
>
<option value="" disabled>Select your Role</option>
<option value="engineer">Software Engineer</option>
Expand All @@ -205,6 +210,7 @@ function AuthPage({ initialMode = 'login' }) {
<input
type="text"
placeholder="Institution / University"
aria-label="Institution or University"
onChange={(e) => setFormData({ ...formData, institution: e.target.value })}
/>
</div>
Expand All @@ -213,6 +219,7 @@ function AuthPage({ initialMode = 'login' }) {
<input
type="text"
placeholder="Field of Study (e.g. Physics)"
aria-label="Field of Study"
onChange={(e) => setFormData({ ...formData, fieldOfStudy: e.target.value })}
/>
</div>
Expand All @@ -225,6 +232,7 @@ function AuthPage({ initialMode = 'login' }) {
<input
type="text"
placeholder="Primary Language (e.g. Python, JS)"
aria-label="Primary Programming Language"
onChange={(e) => setFormData({ ...formData, primaryLanguage: e.target.value })}
/>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/features/tools/runners/common/ToolWorkspace.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1301,7 +1301,8 @@
transition: opacity 0.3s ease;
}

.result-artifact-card:hover .artifact-overlay {
.result-artifact-card:hover .artifact-overlay,
.result-artifact-card:focus-within .artifact-overlay {
opacity: 1;
}

Expand Down
6 changes: 3 additions & 3 deletions src/features/tools/runners/common/ToolWorkspace.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,16 @@ const ResultItem = ({ res, idx }) => {
<>
<img src={itemUrl} alt={res.name} className="artifact-img" />
<div className="artifact-overlay">
<button className="artifact-btn artifact-btn-view" onClick={() => window.open(itemUrl, '_blank')} title="Inspect Full Resolution"><Eye size={20}/></button>
<button className="artifact-btn artifact-btn-download" onClick={handleDownload} title="Commence Download"><Download size={20}/></button>
<button className="artifact-btn artifact-btn-view" onClick={() => window.open(itemUrl, '_blank')} title="Inspect Full Resolution" aria-label="Inspect Full Resolution"><Eye size={20}/></button>
<button className="artifact-btn artifact-btn-download" onClick={handleDownload} title="Commence Download" aria-label="Commence Download"><Download size={20}/></button>
</div>
</>
) : (
<div className="binary-stream-placeholder">
<FileText size={48} />
<span className="binary-label">{isImg ? 'Preparing' : 'Result File'}</span>
<div className="artifact-overlay">
<button className="artifact-btn artifact-btn-download" onClick={handleDownload}>
<button className="artifact-btn artifact-btn-download" onClick={handleDownload} title="Commence Download" aria-label="Commence Download">
<Download size={20}/>
</button>
</div>
Expand Down
Loading