fix(logo): add aria-labels and improve accessibility features in Logo component
fix(progress): enhance accessibility by adding aria-label to LinearProgress component fix(share): add aria-label for better accessibility in Share button fix(title): change h3 to h2 for semantic correctness and add aria-labels for links fix(qrimg): add alt text for QR code image for improved accessibility fix(buttonmenu): add aria-label for mobile menu button to enhance accessibility
This commit is contained in:
+12
-4
@@ -3,19 +3,27 @@ import Link from "next/link";
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
function Logo({ isAbsolute, matchedCity }) {
|
function Logo({ isAbsolute, matchedCity }) {
|
||||||
|
const siteName =
|
||||||
|
matchedCity?.site_name ||
|
||||||
|
(matchedCity?.name ? `${matchedCity.name} نوبت` : "نوبت ۷۲۴");
|
||||||
return (
|
return (
|
||||||
<Link href="/" className={isAbsolute ? "absolute right-[32px] top-0" : ""}>
|
<Link
|
||||||
|
href="/"
|
||||||
|
aria-label={isAbsolute ? undefined : siteName}
|
||||||
|
aria-hidden={isAbsolute ? true : undefined}
|
||||||
|
tabIndex={isAbsolute ? -1 : undefined}
|
||||||
|
className={isAbsolute ? "absolute right-[32px] top-0" : ""}
|
||||||
|
>
|
||||||
<div className="flex items-center justify-start gap-[5px]">
|
<div className="flex items-center justify-start gap-[5px]">
|
||||||
<Image
|
<Image
|
||||||
className="w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]"
|
className="w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]"
|
||||||
src="/assets/images/logo.png"
|
src="/assets/images/logo.png"
|
||||||
width={30}
|
width={30}
|
||||||
height={30}
|
height={30}
|
||||||
alt="logo"
|
alt=""
|
||||||
/>
|
/>
|
||||||
<p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold">
|
<p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold">
|
||||||
{matchedCity?.site_name ||
|
{siteName}
|
||||||
(matchedCity?.name ? `${matchedCity.name} نوبت` : "نوبت ۷۲۴")}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ function ProgressDetail({ data, idx }) {
|
|||||||
<LinearProgress
|
<LinearProgress
|
||||||
value={progress || 0}
|
value={progress || 0}
|
||||||
variant="determinate"
|
variant="determinate"
|
||||||
|
aria-label={label}
|
||||||
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
|
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
|
||||||
sx={{
|
sx={{
|
||||||
"& .MuiLinearProgress-bar": {
|
"& .MuiLinearProgress-bar": {
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ function Share({ data }) {
|
|||||||
<Button
|
<Button
|
||||||
className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
|
className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
|
||||||
onClick={handleOpen}
|
onClick={handleOpen}
|
||||||
|
aria-label="اشتراک گذاری"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
>
|
>
|
||||||
<ShareDI />
|
<ShareDI />
|
||||||
|
|||||||
@@ -39,13 +39,13 @@ function Title({ doctor }) {
|
|||||||
</h1>
|
</h1>
|
||||||
</TextLoading>
|
</TextLoading>
|
||||||
<TextLoading width={100} height={20}>
|
<TextLoading width={100} height={20}>
|
||||||
<h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
|
<h2 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
|
||||||
تخصص:
|
تخصص:
|
||||||
{doctor?.specialties?.map(
|
{doctor?.specialties?.map(
|
||||||
(item, idx) =>
|
(item, idx) =>
|
||||||
`${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
|
`${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
|
||||||
)}
|
)}
|
||||||
</h3>
|
</h2>
|
||||||
</TextLoading>
|
</TextLoading>
|
||||||
<div className="flex items-center justify-start gap-11">
|
<div className="flex items-center justify-start gap-11">
|
||||||
<TextLoading width={60} height={20}>
|
<TextLoading width={60} height={20}>
|
||||||
@@ -92,6 +92,7 @@ function Title({ doctor }) {
|
|||||||
href={url}
|
href={url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
aria-label={key}
|
||||||
className="flex items-center justify-center p-1.5 rounded-full bg-[#F8F8FF]"
|
className="flex items-center justify-center p-1.5 rounded-full bg-[#F8F8FF]"
|
||||||
>
|
>
|
||||||
<Icon />
|
<Icon />
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ export default function QrImg() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center flex-col justify-center mt-[100%]">
|
<div className="flex items-center flex-col justify-center mt-[100%]">
|
||||||
{qrCodeData ? (
|
{qrCodeData ? (
|
||||||
<img src={qrCodeData} width={167} height={167} />
|
<img src={qrCodeData} width={167} height={167} alt="کد QR پروفایل پزشک" />
|
||||||
) : (
|
) : (
|
||||||
<p>در حال بارگذاری...</p>
|
<p>در حال بارگذاری...</p>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ function ButtonMenu({ isActive, setIsActive }) {
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setIsActive(!isActive)}
|
onClick={() => setIsActive(!isActive)}
|
||||||
|
aria-label="منوی موبایل"
|
||||||
className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
|
className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
|||||||
Reference in New Issue
Block a user