Probably accessible star rating component for Vue.

StarRating.vue

<template>
  <div>
    <span class="visually-hidden" :aria-hidden="!readonly">{{ starLabel(value) }}</span>

    <span v-for="i in [1, 2, 3, 4, 5]" :key="i" :aria-hidden="readonly">
      <label class="visually-hidden">
        {{ starLabel(i) }}

        <input
          type="radio"
          :value="i"
          v-model="internalValue"
          v-on:input.prevent="rate($event.target.value)"
          class="visually-hidden"
        />
      </label>
      <v-icon color="primary" @click="rate(i)" aria-hidden="true">{{ starAt(i) }}</v-icon>
    </span>
  </div>
</template>

<script>
export default {
  name: 'StarRating',
  props: {
    readonly: { type: Boolean, default: false },
    value: { type: Number }
  },
  data: () => ({
    internalValue: 0
  }),
  created () {
    this.internalValue = this.value
  },
  watch: {
    value (newVal) {
      this.internalValue = newVal
    }
  },
  methods: {
    rate (pos) {
      if (!this.readonly) {
        this.$emit('input', pos)
      }
    },
    starAt (pos) {
      if (this.value - pos >= 0) {
        return 'mdi-star'
      } else {
        return 'mdi-star-outline'
      }
    },
    starLabel (pos) {
      switch (pos) {
        case 1:
          return 'ein Stern';
        default:
          return `${pos} Sterne`;
      }
    }
  }
}
</script>