I'm currently developing a web app with react. For that I used react-circular-progressbar library and component look as follows.
When I use narrator for screen reading it will says as
image, some texts
I want to overide it as
60 percent some text
Is there any way to exclude current semantics and override or add a sentence to support screen reader. Here is my code
<Card style={{ boxShadow: " 0 4px 8px 0 rgba(0,0,0,0.2)", marginTop: "10px" }} >
<CardBody>
<Row>
<Col lg={5} >
<div style={{ width: "6.5em", height: "6.5em" }} >
<CircularProgressbar className={factorName} value={value} text={`${value}%`} styles={buildStyles({
pathColor: color,
textColor: color
})} />
</div>
</Col>
<Col lg={7}>
<div style={{ display: "table", height: "90px", overflow: "hidden" }} className="pl-2">
<div style={{ display: "table-cell", verticalAlign: "middle" }}>
<span id={factorName} style={{ fontWeight: "bold", fontSize: "15px" }}>some text</span>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
