[Malleys]

role="button"

У кнопки так и так по умолчанию такая роль, вы можете в данном случае пропустить такой атрибут!

Как посчитать количество "button" в div

Если это вам нужно, чтобы равномерно распределить элементы на 200 пикселей, то вы можете использовать flex: 1; на кнопках и display: flex; на родительском элементе.

<div class="owl-dots-slider">
  <button class="owl-dot active"><span></span></button> 
  <button class="owl-dot"><span></span></button>
  <button class="owl-dot"><span></span></button>
</div>

<style>
.owl-dots-slider {
	width: 200px;
	display: flex;
}

.owl-dot {
	all: unset;
	flex: 1;
	text-align: center;
	border: 1px dashed #ddd; /* для примера, чтобы было видно границы элемента, вы можете удалить эту строчку! */
}

.owl-dot::before {
	content: "●";
	color: deeppink;
}
</style>