Skip to content

Revert "chore: Keep working with all transitions" #171

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
merged 1 commit into from
Nov 14, 2025
Merged

Revert "chore: Keep working with all transitions" #171

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
4 changes: 2 additions & 2 deletions src/components/WidgetSkillsTransitionWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="relative min-h-[18rem] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[18rem]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

<div class="relative min-h-[18rem]" role="status">

<transition name="fade" appear mode="out-in">
<WidgetSkillsSkeletonPartial v-if="isLoading || !profile" key="skeleton" />
<WidgetSkillsPartial v-else key="skills" :skills="profile.skills" />
</transition>
Expand Down
4 changes: 2 additions & 2 deletions src/components/WidgetSocialTransitionWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="relative min-h-[200px] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[200px]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

<div class="relative min-h-[200px]" role="status">

<transition name="fade" appear mode="out-in">
<WidgetSocialSkeletonPartial v-if="isLoading" key="skeleton" />
<WidgetSocialPartial v-else key="social" :social="social" />
</transition>
Expand Down
20 changes: 0 additions & 20 deletions src/css/support/blog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,23 +234,3 @@
.fade-leave-active {
pointer-events: none;
}

/* Transition wrapper - makes elements overlay during crossfade */
.fade-transition-wrapper {
display: grid;
}

.fade-transition-wrapper > * {
grid-column: 1;
grid-row: 1;
}

/* Entering element appears on top, leaving element (skeleton) stays visible underneath */
/* Scoped to wrapper to avoid breaking z-index on dialogs/overlays */
.fade-transition-wrapper .fade-enter-active {
z-index: 2;
}

.fade-transition-wrapper .fade-leave-active {
z-index: 1;
}
4 changes: 2 additions & 2 deletions src/pages/AboutPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@

<div class="mt-5 space-y-5">
<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Let's Connect</h2>
<div class="relative min-h-[5rem] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[5rem]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

											<div class="relative min-h-[5rem]" role="status">

<transition name="fade" appear mode="out-in">
<p v-if="profile" key="connect">
I'm happy to connect by
<a v-lazy-link class="blog-link" title="send me an email" aria-label="send me an email" :href="`mailto:${profile.email}`"> email </a>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/PostPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@
</RouterLink>
</div>

<div class="relative min-h-[25rem] fade-transition-wrapper">
<transition name="fade" appear>
<PostPageSkeletonPartial v-if="isLoading" key="skeleton" aria-hidden="true" />
<div class="relative min-h-[25rem]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

								<div class="relative min-h-[25rem]" role="status">

<transition name="fade" appear mode="out-in">
<PostPageSkeletonPartial v-if="isLoading" key="skeleton" />
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

This revert removes aria-hidden="true" from the skeleton loader. While this is part of the revert, it's a good practice to hide skeleton loaders from screen readers as they are purely visual placeholders and can be confusing. I recommend adding aria-hidden="true" back to this component, especially since other skeleton components in the project seem to be hidden from assistive technologies (e.g., as indicated by tests for ResumePage).

										<PostPageSkeletonPartial v-if="isLoading" key="skeleton" aria-hidden="true" />


<article v-else-if="post" key="post">
<!-- Post header -->
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ProjectsPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
</div>
<section>
<h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
<div class="relative min-h-[25rem] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[25rem]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

											<div class="relative min-h-[25rem]" role="status">

<transition name="fade" appear mode="out-in">
<div v-if="isLoadingProjects" key="loading" data-testid="projects-skeleton-grid" class="blog-projects-grid">
<ProjectCardSkeletonPartial
v-for="index in skeletonCount"
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ResumePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
</a>
</nav>
<!-- Page content -->
<div class="text-slate-500 dark:text-slate-400 relative fade-transition-wrapper">
<transition name="fade" appear>
<div class="text-slate-500 dark:text-slate-400 relative">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

									<div class="text-slate-500 dark:text-slate-400 relative" role="status">

<transition name="fade" appear mode="out-in">
<div v-if="shouldShowSkeleton" key="skeleton" :class="['space-y-12', resumeSectionsTotalHeight]">
<ResumePageSkeletonPartial :show-refresh-button="hasProfileError" @retry="refreshResumePage" />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/TagPostsPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@

<section role="status">
<h2 class="font-aspekta text-xl font-[650] mb-6">Articles</h2>
<div class="relative min-h-[20rem] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[20rem]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

It's great that the parent <section> has role="status". To make the live region more specific to the content being loaded, you could move role="status" to this div which directly wraps the <transition>. This would make the announcements more precise.

											<div class="relative min-h-[20rem]" role="status">

<transition name="fade" appear mode="out-in">
<div v-if="isLoading" key="skeleton" class="space-y-5" data-testid="tag-posts-skeleton">
<ArticleItemSkeletonPartial v-for="skeleton in skeletonCount" :key="`tag-post-skeleton-${skeleton}`" />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/partials/ArticlesListPartial.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
</ul>

<!-- Articles list -->
<div class="relative min-h-[24rem] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[24rem]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

		<div class="relative min-h-[24rem]" role="status">

<transition name="fade" appear mode="out-in">
<div v-if="isLoading" key="skeleton" aria-busy="true" class="min-h-[24rem]">
<ArticleItemSkeletonPartial v-for="skeleton in skeletonCount" :key="`article-skeleton-${skeleton}`" />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/partials/FeaturedProjectsPartial.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<h2 class="font-aspekta text-xl font-[650] mb-5">Open-Source Projects</h2>

<!-- Cards -->
<div class="relative min-h-[300px] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[300px]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

		<div class="relative min-h-[300px]" role="status">

<transition name="fade" appear mode="out-in">
<div v-if="isLoading" key="loading" class="blog-projects-grid">
<ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" wrapper-class="odd:-rotate-1 even:rotate-1" />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/partials/TalksPartial.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<h2 class="font-aspekta text-xl font-[650] mb-5">Popular Talks</h2>

<!-- Cards -->
<div class="relative min-h-[300px] fade-transition-wrapper">
<transition name="fade" appear>
<div class="relative min-h-[300px]">
Copy link

@gemini-code-assist gemini-code-assist bot Nov 14, 2025

Choose a reason for hiding this comment

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

high

To improve accessibility, consider adding role="status" to this container. This will make it a live region, announcing to screen reader users when the content (e.g., switching from a skeleton loader to the actual content) has been updated. This pattern is already used in TagPostsPage.vue, and applying it here would improve consistency and user experience.

		<div class="relative min-h-[300px]" role="status">

<transition name="fade" appear mode="out-in">
<div v-if="isLoadingTalks || talks.length === 0" key="skeleton" class="blog-projects-grid">
<TalkCardSkeletonPartial v-for="index in 4" :key="`talk-skeleton-${index}`" :is-animated="isLoadingTalks && talks.length === 0" />
</div>
Expand Down