Why does the shadcn pagination component use both <nav> and role="navigation" together?

[ksjdev]

Hi, I'm a web developer currently studying in South Korea.

I was looking at the pagination component in the shadcn/ui repo, and I noticed that in the following line:

ui/apps/www/registry/default/ui/pagination.tsx

Line 9 in 84d6c83

role="navigation"

The component uses the semantic <nav> tag along with an explicit role="navigation" attribute.
As far as I’ve learned, HTML5 semantic elements like <nav> already imply the corresponding ARIA role.

I'm curious why both are used together in this case.
Is there a specific reason for explicitly declaring the role, or is it just for clarity or broader accessibility support?

Thank you in advance for your answer!

[MartinCura]

jsx-a11y/no-redundant-roles autoremoves the role="navigation", it's unnecessary and redundant.

Using the <nav> element will automatically communicate a section has a role of navigation.

—MDN