moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): make gear table actions consistent with roasts table

Browse source 
- Add visible "Actions" header instead of screen-reader-only text
- Change delete icon from always-red to neutral gray with red hover
- Add focus-visible styles and title attribute for accessibility
This commit is contained in:
Jon Seager 2026-02-02 16:18:48 +00:00
parent 6bbbafbef4
commit 0abb1ffcc6
No known key found for this signature in database
1 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
templates/partials/gear_list.html
View file

@ -21,9 +21,7 @@
{% call table::sortable_header("Model", "model", navigator, "#gear-list") %} {% call table::sortable_header("Model", "model", navigator, "#gear-list") %}
{% call table::sortable_header("Added", "created-at", navigator, "#gear-list") %} {% call table::sortable_header("Added", "created-at", navigator, "#gear-list") %}
{% if is_authenticated %} {% if is_authenticated %}
<th scope="col" class="relative px-4 py-3"> <th scope="col" class="px-4 py-3 text-right">Actions</th>
<span class="sr-only">Actions</span>
</th>
{% endif %} {% endif %}
</tr> </tr>
</thead> </thead>
@ -45,10 +43,11 @@
{{ item.created_at }} {{ item.created_at }}
</td> </td>
{% if is_authenticated %} {% if is_authenticated %}
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium"> <td class="px-4 py-3 text-right">
<button <button
type="button" type="button"
class="text-red-600 hover:text-red-900" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-stone-500 transition hover:text-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
title="Delete gear"
data-on:click="confirm('Delete this gear?') && @delete('/api/v1/gear/{{ item.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#gear-list', mode: 'replace'}})" data-on:click="confirm('Delete this gear?') && @delete('/api/v1/gear/{{ item.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#gear-list', mode: 'replace'}})"
> >
<span class="sr-only">Delete</span> <span class="sr-only">Delete</span>