hamed
12d2e2e3f1
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
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import { numberToArStyle } from "@/helper";
|
|
import { LinearProgress } from "@mui/material";
|
|
|
|
const fallbackLabels = [
|
|
"برخورد مناسب پزشک",
|
|
"تشخیص درست",
|
|
"زمان انتظار در مطب",
|
|
"مهارت پزشک",
|
|
"نظافت مطب",
|
|
];
|
|
|
|
function ProgressDetail({ data, idx }) {
|
|
const label = data?.label ?? fallbackLabels[idx];
|
|
const progress = typeof data === "object" && data !== null ? data.progress : data;
|
|
|
|
return (
|
|
<li className="flex items-center justify-start gap-2 w-full">
|
|
<p className="text-[#525252] text-[14px] font-normal min-w-[120px] w-[118px]">
|
|
{label}
|
|
</p>
|
|
<LinearProgress
|
|
value={progress || 0}
|
|
variant="determinate"
|
|
aria-label={label}
|
|
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
|
|
sx={{
|
|
"& .MuiLinearProgress-bar": {
|
|
background: "#05BA58",
|
|
borderRadius: "10px",
|
|
},
|
|
}}
|
|
/>
|
|
<p
|
|
className={`text-[#525252] font-medium ${progress ? "text-[20px]" : "text-[18px]"}`}
|
|
>
|
|
{progress ? `${numberToArStyle(progress)}%` : "بدون نمره"}
|
|
</p>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default ProgressDetail;
|