See https://www.w3.org/WAI/ARIA/apg/patterns/ for a guide on how to create accessible markup for custom controls and the associated examples.

See specifically https://www.w3.org/WAI/ARIA/apg/practices/names-and-descript... for details on naming. That has extensive notes and details for labeling elements correctly.

See https://getbootstrap.com/docs/5.0/components/ for bootstrap markup on creating accessible components.

There are plenty of other resources.

I did read the article. Why do you need to label a div? It's just a container, not a semantic element. If you really want to use a div for something semantic you can set role and aria-label. That is done all the time and works with screen readers.