How to fix accessibility on a page "Buttons must have discernible text"

Question

I have installed axe dev tool. But when I scan the page i find this error "Ensures buttons have discernible text". If I inspect on dev tool and add aria-label on the button it goes away, but in my code I have used vue form datepicker. not sure how to handle that below is the code sample.

  <b-form-datepicker
      id="example-i18n-picker"
      v-model="value"
      v-bind="labels[locale] || {}"
      :locale="locale"
      :start-weekday="weekday"
      :show-decade-nav="showDecadeNav"
      :hide-header="hideHeader"
      class="mb-2"
     ></b-form-datepicker>

i tried adding aria-label="calender" to this b-form-datepicker but does not work that way.

Answer 1

After reading the comments in your question, tried to check the source of the component and came up with below. Kindly try and let me know if it works for you:

 <b-form-datepicker
  id="example-i18n-picker"
  v-model="value"
  v-bind="labels[locale] || {}"
  :locale="locale"
  :start-weekday="weekday"
  :show-decade-nav="showDecadeNav"
  :hide-header="hideHeader"
  class="mb-2"
 >
  <template #button-content="{isHovered,hasFocus}">
    <template v-if="isHovered || hasFocus">
      <b-icon-calendar-fill />
    </template>
    <template v-else>
      <b-icon-calendar />
    </template>
  </template>
</b-form-datepicker>

It uses the suggestion of @slugolicious to use button-content and also to remove aria-hidden attribute