sebsn86
/
nx-guitar-school
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix aria-label missing

Browse Source
feature/optimization
Näser 3 years ago
parent d4ab120bd7
commit 83d807cd27
5 changed files with 104 additions and 34 deletions
Show Stats Download Patch File Download Diff File

12
apps/website/components/card-blog-details/card-blog-details.tsx
Unescape View File

@ -35,17 +35,20 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
</h2>
<section className="flex items-center justify-between">
<div className="flex">
<a href="#"
className="flex items-center">
<span className="flex items-center">
<img
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
alt="avatar"
width="auto"
height="auto"
className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
<h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
</a>
</span>
</div>
<div className="flex flex-col">
<a href={getCategoryUrl(item)}
title={"Accédez à la catégorie " + delve(item, 'category.data.attributes.name', 'N/A')}
aria-label={"Accédez à la catégorie " + delve(item, 'category.data.attributes.name', 'N/A')}
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
{delve(item, 'category.data.attributes.name', 'N/A')}
</a>
@ -81,8 +84,7 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
<FacebookMessengerShareButton
url={shareUrl}
appId="521270401588372"
className="Demo__some-network__share-button"
>
className="Demo__some-network__share-button">
<FacebookMessengerIcon size={32}
round />
</FacebookMessengerShareButton>

13
apps/website/components/card-blog/card-blog.tsx
Unescape View File

@ -27,6 +27,8 @@ export function CardBlog({item}: CardBlogProps) {
text-gray-600
dark:text-gray-300">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
<a href={getCategoryUrl(item)}
title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
className="px-2 py-1 text-sm font-bold rounded
bg-gray-600 text-gray-100
hover:bg-gray-500">
@ -35,6 +37,8 @@ export function CardBlog({item}: CardBlogProps) {
</div>
<div className="mt-2">
<a
title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
href={getPostUrl(item)}
className="text-xl font-bold hover:underline
text-gray-700
@ -47,18 +51,21 @@ export function CardBlog({item}: CardBlogProps) {
</div>
<div className="flex justify-between items-center mt-4">
<a href={getPostUrl(item)}
title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
className="text-blue-500 text-sm hover:underline">Lire l'article</a>
<div>
<a href="#"
className="flex items-center">
<span className="flex items-center">
<img
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
alt="avatar"
width="auto"
height="auto"
className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
<h3 className="text-normal font-bold hover:underline
text-gray-700
dark:text-gray-300">Alex John</h3>
</a>
</span>
</div>
</div>
</div>

29
apps/website/components/footer/footer.tsx
Unescape View File

@ -6,8 +6,13 @@ export function Footer({items = []}) {
const value = delve(item, 'attributes', {});
return (
<li key={value.title + index} className="my-1 h-10 flex align-middle items-center md:h-auto">
<a href={value.url} target={value.target} className="mr-4 hover:underline md:mr-6 ">
<li key={value.title + index}
className="my-1 h-10 flex align-middle items-center md:h-auto">
<a href={value.url}
target={value.target}
title={"Accédez à la page " + value.title}
aria-label={"Accédez à la page " + value.title}
className="mr-4 hover:underline md:mr-6 ">
{value.title}
</a>
</li>
@ -17,17 +22,27 @@ export function Footer({items = []}) {
return (
<footer className="p-4 bg-white md:px-6 md:py-8 dark:bg-gray-900">
<div className="sm:flex sm:items-center sm:justify-between">
<a href="/" className="flex items-center mb-4 sm:mb-0">
<img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo"/>
<a href="/"
aria-label="Page d'accueil MeCP"
title="Page d'accueil MeCP"
className="flex items-center mb-4 sm:mb-0">
<img src="https://flowbite.com/docs/images/logo.svg"
className="h-8 mr-3"
height="auto"
width="auto"
alt="Flowbite Logo" />
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
</a>
<ul className="flex flex-wrap items-center justify-end mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
{items.map((item, index: number) => generateItem(item, index))}
</ul>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 3 <a
href="https://flowbite.com/" className="hover:underline">Flowbite™</a>. All Rights Reserved.
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 3
<a href="/"
aria-label="Page d'accueil MeCP"
title="Page d'accueil MeCP"
className="hover:underline">MeCP™</a>. All Rights Reserved.
</span>
</footer>
);

72
apps/website/components/header/header.tsx
Unescape View File

@ -50,6 +50,8 @@ export function Header({items = []}) {
return (
<a href={item.url}
target={item.target}
title={"Accédez à la page " + item.title}
aria-label={"Accédez à la page " + item.title}
className={"text-gray-900 hover:text-blue-600 dark:text-gray-400 dark:hover:bg-transparent dark:hover:text-gray-500 " + (isActive ? 'text-blue-600 dark:text-gray-500' : '') + " block py-2 pl-3 pr-4 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:p-0"}
aria-current="page">{item.title}</a>
)
@ -60,6 +62,8 @@ export function Header({items = []}) {
return (
<li key={value.title + index}>
<a href={value.url}
title={"Accédez à la page " + value.title}
aria-label={"Accédez à la page " + value.title}
className="text-gray-900 dark:text-gray-400 hover:text-blue-600 dark:hover:text-gray-500">
{value.title}
</a>
@ -86,7 +90,8 @@ export function Header({items = []}) {
<div id="menu-dropdown"
className="absolute z-10 grid hidden w-auto text-sm bg-white border border-gray-100 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-700">
<div className="p-4 pb-0 text-gray-900 md:pb-4 dark:text-white">
<ul className="space-y-4" aria-labelledby="mega-menu-dropdown-button">
<ul className="space-y-4"
aria-labelledby="mega-menu-dropdown-button">
{item.children.data.map((children, index) => renderRegularDropdownItem(children, index))}
</ul>
</div>
@ -99,17 +104,21 @@ export function Header({items = []}) {
return (
<>
<a href="/sign-in"
title="Page de connexion"
aria-label="Page de connexion"
className="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 mr-1 md:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">
<span className="hidden lg:block">Connexion</span>
<span className="block lg:hidden">
<FontAwesomeIcon icon={faRightToBracket}/>
<FontAwesomeIcon icon={faRightToBracket} />
</span>
</a>
<a href="/sign-up"
title="Page d'inscription"
aria-label="Page d'inscription"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 md:px-5 md:py-2.5 mr-1 md:mr-2 dark:bg-dark-600 dark:hover:bg-dark-500 focus:outline-none dark:focus:ring-blue-800">
<span className="hidden lg:block">Inscription</span>
<span className="block lg:hidden">
<FontAwesomeIcon icon={faUserPlus}/>
<FontAwesomeIcon icon={faUserPlus} />
</span>
</a>
</>
@ -120,14 +129,16 @@ export function Header({items = []}) {
return (
<>
<button type="button"
role="button"
className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
id="user-menu-button"
aria-label="Options de l'utilisateur"
aria-expanded="false"
data-dropdown-placement="bottom">
<span className="sr-only">Open user menu</span>
<span className="sr-only">Options de l'utilisateur</span>
<img className="w-8 h-8 rounded-full"
src={hasAvatar((session.user as any)) ? getBackendImg((session.user as any).avatar.formats.thumbnail.url) : siteConfig.defaultUserAvatar}
alt="user photo"/>
alt="user photo" />
</button>
<div
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
@ -137,31 +148,40 @@ export function Header({items = []}) {
<span
className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">{session.user.email}</span>
</div>
<ul className="py-1" aria-labelledby="user-menu-button">
<ul className="py-1"
aria-labelledby="user-menu-button">
<li>
<a href="#"
aria-label="Profile"
title="Profile"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Dashboard
Profile
</a>
</li>
<li>
<a href="#"
aria-label="Paramètres"
title="Paramètres"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Settings
Paramètres
</a>
</li>
<li>
<a href="#"
aria-label="Mes cours"
title="Mes cours"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Earnings
Mes cours
</a>
</li>
<li>
<a href="#"
title="Dconnexion"
aria-label="Dconnexion"
// @ts-ignore
onClick={signOut}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Sign out
Déconnexion
</a>
</li>
</ul>
@ -179,25 +199,42 @@ export function Header({items = []}) {
className="bg-white dark:bg-gray-800 w-full md:w-auto p-2 md:p-4"
id="navbar-default">
<div className="container max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
<a href="/" className="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" className="h-6 mr-3 sm:h-9" alt="Flowbite Logo"/>
<a href="/"
aria-label="Page d'accueil MeCP"
title="Page d'accueil MeCP"
className="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg"
className="h-6 mr-3 sm:h-9"
height="auto"
width="auto"
alt="Flowbite Logo" />
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">MeCP</span>
</a>
<div className="flex items-center">
<button
id="shop-panel-button"
name="shop-panel-button"
aria-label="Accéder au panier d'achat"
role="button"
type="button"
className="text-gray-700 border border-transparent hover:bg-gray-200 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center mr-2 dark:text-blue-500 dark:hover:text-white dark:focus:ring-blue-800">
<FontAwesomeIcon icon={faBagShopping}/>
<FontAwesomeIcon icon={faBagShopping} />
</button>
{session ? renderConnectedUser() : renderAnonymousUser()}
<button id="menu-button"
type="button"
role="navigation"
className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-label="Déplier le menu"
aria-controls="navbar-dropdown"
aria-expanded="false">
<span className="sr-only">Open main menu</span>
<svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
<svg className="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
@ -207,15 +244,16 @@ export function Header({items = []}) {
</div>
</div>
</section>
<hr className="border-gray-100 dark:border-gray-700 container max-w-screen-xl mx-auto"/>
<section className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
<hr className="border-gray-100 dark:border-gray-700 container max-w-screen-xl mx-auto" />
<section className="hidden w-full md:block md:w-auto"
id="navbar-dropdown">
<div className="container max-w-screen-xl mx-auto">
<ul className="flex flex-col md:p-4 font-medium md:flex-row md:space-x-8 md:mt-0">
{items.map((item, index: number) => renderGenerateItem(item, index))}
</ul>
</div>
</section>
<hr className="border-gray-100 sm:mx-auto dark:border-gray-700"/>
<hr className="border-gray-100 sm:mx-auto dark:border-gray-700" />
</main>
</div>
</nav>

12
apps/website/components/home-section-blog-une/home-section-blog-une.tsx
Unescape View File

@ -23,6 +23,8 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
</div>
<div className="flex justify-between items-center absolute right-5 top-5">
<a href={getCategoryUrl(item)}
title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
{delve(item, 'attributes.category.data.attributes.name', 'N/A')}
</a>
@ -40,6 +42,8 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
<div className="mt-2">
<a
href={getPostUrl(item)}
title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
className="text-xl font-bold hover:underline
text-gray-700
dark:text-gray-200">
@ -52,18 +56,22 @@ export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
<div className="flex justify-between items-center mt-4">
<a href={getPostUrl(item)}
title={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
aria-label={"Accédez à l'article " + delve(item, 'attributes.title', 'N/A')}
className="text-blue-500 text-sm hover:underline">Lire l'article</a>
<div>
<a href="#"
<span
className="flex items-center">
<img
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
alt="avatar"
width="auto"
height="auto"
className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
<h3 className="text-normal font-bold hover:underline
text-gray-700
dark:text-gray-300">Alex John</h3>
</a>
</span>
</div>
</div>
</main>

Write Preview
Loading…
Cancel
Save