role is to enhance semantics. When existing HTML tags cannot fully express semantics, you can use role to explain.
Usually this happens with some customized components, which can enhance the accessibility, usability and interactivity of the components.
role is used to describe the actual function of a non-standard tag. For example, if you use a div as a button, then set the role="button" of the div, and the auxiliary tool can recognize that it is actually a button