Skip to content

a11y: fix contrast, footer link affordance, and table headers (metric: Accessibility) #5

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
phyce merged 2 commits into from
Jul 31, 2026
Merged

a11y: fix contrast, footer link affordance, and table headers (metric: Accessibility) #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a88e79
Fix contrast and table headers flagged by Lighthouse (a11y)
phyceClaw Jul 31, 2026
0e0abab
Update AppFooter.vue
phyce Jul 31, 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
4 changes: 2 additions & 2 deletions resources/js/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
@reference "tailwindcss";

.app-footer {
@apply py-4 text-center text-sm text-gray-500;
@apply py-4 text-center text-sm text-gray-400;
}

.app-footer__link {
@apply text-orange-500 hover:underline;
@apply text-orange-500 hover:underline;
}
</style>
12 changes: 8 additions & 4 deletions resources/js/pages/Developers/Growing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
<th scope="col" class="dev-growing__head-cell dev-growing__head-cell--num">Plugins</th>
<th scope="col" class="dev-growing__head-cell dev-growing__head-cell--num">Growth</th>
<th scope="col" class="dev-growing__head-cell dev-growing__head-cell--num" title="Peak installs yesterday">Installs gained</th>
<th scope="col" class="dev-growing__head-cell"></th>
<th scope="col" class="dev-growing__head-cell"><span class="dev-growing__head-cell-label">Profile</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -189,7 +189,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}

.dev-growing__head-cell {
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4 sm:py-3;
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4 sm:py-3;
white-space: nowrap;
}

Expand Down Expand Up @@ -268,7 +268,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}

.dev-growing__pct-base {
@apply text-xs tabular-nums text-gray-500;
@apply text-xs tabular-nums text-gray-400;
}

.dev-growing__installs {
Expand All @@ -280,7 +280,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}

.dev-growing__installs-total {
@apply text-xs tabular-nums text-gray-500;
@apply text-xs tabular-nums text-gray-400;
}

.dev-growing__profile-link {
Expand All @@ -295,4 +295,8 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
border-color: #c54704;
color: #fff;
}

.dev-growing__head-cell-label {
@apply sr-only;
}
</style>
10 changes: 7 additions & 3 deletions resources/js/pages/Developers/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const columns: { field: SortField; label: string; numeric: boolean; title?: stri
{{ col.label }}
<span :class="sortField === col.field ? 'developers__sort--active' : 'developers__sort--inactive'">{{ sortIndicator(col.field) }}</span>
</th>
<th scope="col" class="developers__head-cell"></th>
<th scope="col" class="developers__head-cell"><span class="developers__head-cell-label">Profile</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -186,7 +186,7 @@ const columns: { field: SortField; label: string; numeric: boolean; title?: stri
}

.developers__count {
@apply flex-shrink-0 text-xs tabular-nums text-gray-500;
@apply flex-shrink-0 text-xs tabular-nums text-gray-400;
}

.developers__empty {
Expand Down Expand Up @@ -222,7 +222,7 @@ const columns: { field: SortField; label: string; numeric: boolean; title?: stri
}

.developers__head-cell {
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4 sm:py-3;
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4 sm:py-3;
white-space: nowrap;
}

Expand Down Expand Up @@ -316,4 +316,8 @@ const columns: { field: SortField; label: string; numeric: boolean; title?: stri
border-color: #c54704;
color: #fff;
}

.developers__head-cell-label {
@apply sr-only;
}
</style>
12 changes: 8 additions & 4 deletions resources/js/pages/Developers/Popular.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
<th scope="col" class="dev-popular__head-cell dev-popular__head-cell--num">Plugins</th>
<th scope="col" class="dev-popular__head-cell dev-popular__head-cell--num" title="Peak installs yesterday">{{ growthLabel }}</th>
<th scope="col" class="dev-popular__head-cell dev-popular__head-cell--num">% Change</th>
<th scope="col" class="dev-popular__head-cell"></th>
<th scope="col" class="dev-popular__head-cell"><span class="dev-popular__head-cell-label">Profile</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -200,7 +200,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}
.dev-popular__head-cell {
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4 sm:py-3;
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4 sm:py-3;
white-space: nowrap;
}
Expand Down Expand Up @@ -283,7 +283,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}
.dev-popular__installs-total-sub {
@apply text-xs tabular-nums text-gray-500;
@apply text-xs tabular-nums text-gray-400;
}
.dev-popular__pct {
Expand All @@ -295,7 +295,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}
.dev-popular__pct-base {
@apply text-xs tabular-nums text-gray-500;
@apply text-xs tabular-nums text-gray-400;
}
.dev-popular__profile-link {
Expand All @@ -310,4 +310,8 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
border-color: #c54704;
color: #fff;
}
.dev-popular__head-cell-label {
@apply sr-only;
}
</style>
18 changes: 9 additions & 9 deletions resources/js/pages/Developers/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__aliases {
@apply text-xs text-gray-500;
@apply text-xs text-gray-400;
}

.dev-profile__figures {
Expand All @@ -196,15 +196,15 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__figure-label {
@apply text-xs font-medium uppercase tracking-wider text-gray-500;
@apply text-xs font-medium uppercase tracking-wider text-gray-400;
}

.dev-profile__figure-value {
@apply text-2xl font-bold tabular-nums text-gray-100 sm:text-3xl;
}

.dev-profile__figure-value--peak {
@apply text-gray-500;
@apply text-gray-400;
}

.dev-profile__facts {
Expand All @@ -217,15 +217,15 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__fact-label {
@apply text-xs font-medium text-gray-500;
@apply text-xs font-medium text-gray-400;
}

.dev-profile__fact-value {
@apply text-base font-semibold text-gray-200;
}

.dev-profile__fact-note {
@apply truncate text-xs text-gray-500;
@apply truncate text-xs text-gray-400;
}

.dev-profile__fact-link {
Expand Down Expand Up @@ -261,7 +261,7 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__card-count {
@apply text-xs font-medium tabular-nums text-gray-600;
@apply text-xs font-medium tabular-nums text-gray-400;
}

.dev-profile__table-wrapper {
Expand Down Expand Up @@ -293,7 +293,7 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__th {
@apply px-3 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4;
@apply px-3 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4;
white-space: nowrap;
}

Expand Down Expand Up @@ -325,7 +325,7 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__td--muted {
@apply font-normal text-gray-500;
@apply font-normal text-gray-400;
}

.dev-profile__td--action {
Expand All @@ -343,7 +343,7 @@ function coauthorLabel(entry: DeveloperPluginEntry): string | null {
}

.dev-profile__plugin-coauthors {
@apply text-xs text-gray-600;
@apply text-xs text-gray-400;
}

.dev-profile__link-btn {
Expand Down
8 changes: 6 additions & 2 deletions resources/js/pages/Developers/Top.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
<th scope="col" class="dev-top__head-cell">Developer</th>
<th scope="col" class="dev-top__head-cell dev-top__head-cell--num">Plugins</th>
<th scope="col" class="dev-top__head-cell dev-top__head-cell--num" title="Peak installs yesterday">Installs</th>
<th scope="col" class="dev-top__head-cell"></th>
<th scope="col" class="dev-top__head-cell"><span class="dev-top__head-cell-label">Profile</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -121,7 +121,7 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
}

.dev-top__head-cell {
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4 sm:py-3;
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4 sm:py-3;
white-space: nowrap;
}

Expand Down Expand Up @@ -189,4 +189,8 @@ const rows = computed((): DeveloperRankEntry[] => props.rankings?.entries ?? [])
border-color: #c54704;
color: #fff;
}

.dev-top__head-cell-label {
@apply sr-only;
}
</style>
10 changes: 7 additions & 3 deletions resources/js/pages/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const columns: { field: SortField; label: string }[] = [
{{ col.label }}
<span :class="sortField === col.field ? 'plugin-table__sort--active' : 'plugin-table__sort--inactive'">{{ sortIndicator(col.field) }}</span>
</th>
<th scope="col" class="plugin-table__head-cell"></th>
<th scope="col" class="plugin-table__head-cell"><span class="plugin-table__head-cell-label">Stats</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -169,7 +169,7 @@ const columns: { field: SortField; label: string }[] = [
}

.plugin-table__head-cell {
@apply px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-500;
@apply px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-400;
white-space: nowrap;
}

Expand Down Expand Up @@ -238,7 +238,7 @@ const columns: { field: SortField; label: string }[] = [
}

.plugin-table__author {
@apply ml-1.5 text-xs text-gray-500;
@apply ml-1.5 text-xs text-gray-400;
}

.plugin-table__stats-link {
Expand Down Expand Up @@ -276,4 +276,8 @@ const columns: { field: SortField; label: string }[] = [
.plugin-table__scrollbar-spacer {
@apply h-px;
}

.plugin-table__head-cell-label {
@apply sr-only;
}
</style>
10 changes: 5 additions & 5 deletions resources/js/pages/PluginDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,7 +669,7 @@ onUnmounted(() => {
}

.plugin-detail__related-meta {
@apply truncate text-xs text-gray-500;
@apply truncate text-xs text-gray-400;
}

.plugin-detail__related-tags {
Expand All @@ -684,7 +684,7 @@ onUnmounted(() => {
}

.plugin-detail__related-reason {
@apply mt-0.5 text-xs text-gray-600;
@apply mt-0.5 text-xs text-gray-400;
}

.plugin-detail__developer {
Expand Down Expand Up @@ -733,7 +733,7 @@ onUnmounted(() => {
}

.plugin-detail__dev-stat-label {
@apply text-xs text-gray-500;
@apply text-xs text-gray-400;
}

.plugin-detail__contributors {
Expand All @@ -742,7 +742,7 @@ onUnmounted(() => {
}

.plugin-detail__contributors-title {
@apply text-xs font-medium uppercase tracking-wider text-gray-500;
@apply text-xs font-medium uppercase tracking-wider text-gray-400;
}

.plugin-detail__contributor-list {
Expand All @@ -762,7 +762,7 @@ onUnmounted(() => {
}

.plugin-detail__contributor-meta {
@apply text-xs tabular-nums text-gray-500;
@apply text-xs tabular-nums text-gray-400;
}

.plugin-detail__dev-link {
Expand Down
8 changes: 6 additions & 2 deletions resources/js/pages/TopAbsolute.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const rows = computed((): GrowthEntry[] => props.entries ?? []);
<th scope="col" class="top-absolute__head-cell">Plugin</th>
<th scope="col" class="top-absolute__head-cell top-absolute__head-cell--num">Installs</th>
<th scope="col" class="top-absolute__head-cell top-absolute__head-cell--num">% Change</th>
<th scope="col" class="top-absolute__head-cell"></th>
<th scope="col" class="top-absolute__head-cell"><span class="top-absolute__head-cell-label">Stats</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -206,7 +206,7 @@ const rows = computed((): GrowthEntry[] => props.entries ?? []);
}

.top-absolute__head-cell {
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4 sm:py-3;
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4 sm:py-3;
}

.top-absolute__head-cell--rank {
Expand Down Expand Up @@ -308,4 +308,8 @@ const rows = computed((): GrowthEntry[] => props.entries ?? []);
border-color: #c54704;
color: #fff;
}

.top-absolute__head-cell-label {
@apply sr-only;
}
</style>
8 changes: 6 additions & 2 deletions resources/js/pages/TopRelative.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const rows = computed((): GrowthEntry[] => props.entries ?? []);
<th scope="col" class="top-relative__head-cell">Plugin</th>
<th scope="col" class="top-relative__head-cell top-relative__head-cell--num">% Change</th>
<th scope="col" class="top-relative__head-cell top-relative__head-cell--num">Installs</th>
<th scope="col" class="top-relative__head-cell"></th>
<th scope="col" class="top-relative__head-cell"><span class="top-relative__head-cell-label">Stats</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -206,7 +206,7 @@ const rows = computed((): GrowthEntry[] => props.entries ?? []);
}

.top-relative__head-cell {
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-500 sm:px-4 sm:py-3;
@apply px-2 py-2 text-xs font-medium uppercase tracking-wider text-gray-400 sm:px-4 sm:py-3;
}

.top-relative__head-cell--rank {
Expand Down Expand Up @@ -309,4 +309,8 @@ const rows = computed((): GrowthEntry[] => props.entries ?? []);
border-color: #c54704;
color: #fff;
}

.top-relative__head-cell-label {
@apply sr-only;
}
</style>
Loading