Your UI looks right. The layout is clean, the colors are correct and everything renders as designed. What are the browser and the screen reader actually seeing?
When we build components focused only on the visual result, the HTML underneath can be a wall of anonymous <div> and <span> elements, with no headings, no landmarks and no interactive elements the browser can understand.
On screen, the two versions below look identical. For a screen reader user, the left side is a set of anonymous boxes with no structure to navigate. The right side is a page with a navigation, a heading, a paragraph and a button that behaves like a button.
The structure you choose when building a component decides whether someone can use what you built.
What does the HTML underneath your components look like?
WCAG 2.1 · Info and Relationships
1.3.1: Information, structure, and relationships must be conveyed through semantic markup, not only visual presentation.