Add aria-label and data-action attributes for consistency

[bennymeier]

Hi,

I overwrite the title- and the aria-label-attributes after initializing Marker.js. So it looks like this:

<div class="__markerjs2__0_toolbar-block" style="white-space: nowrap">
  <div
    class="__markerjs2__0_toolbar_button --active marker__toolbar__button--active"
    data-action="select"
    title="Selektieren"
    aria-label="Selektieren"
  >
  </div>
  <div
    class="__markerjs2__0_toolbar_button marker__toolbar__button"
    data-action="delete"
    title="Markierung löschen"
    aria-label="Markierung löschen"
    style="fill-opacity: 1; pointer-events: all"
  >
  </div>
  <div
    class="__markerjs2__0_toolbar_button marker__toolbar__button"
    data-action="clear"
    title="Alle Markierungen löschen"
    aria-label="Alle Markierungen löschen"
  >
  </div>
  <div
    class="__markerjs2__0_toolbar_button marker__toolbar__button"
    data-action="undo"
    title="Rückgängig"
    aria-label="Rückgängig"
  >
  </div>
  <div
    class="__markerjs2__0_toolbar_button marker__toolbar__button"
    data-action="redo"
    title="Wiederherstellen"
    aria-label="Wiederherstellen"
  >
  </div>
  <div
    class="__markerjs2__0_toolbar_button marker__toolbar__button"
    data-action="zoom"
    title="Heranzoomen"
    aria-label="Heranzoomen"
  >
  </div>
  <div
    class="__markerjs2__0_toolbar_button marker__toolbar__button"
    data-action="zoom-out"
    title="Verkleinern"
    aria-label="Verkleinern"
  >
  </div>
</div>

The code above shows the top toolbar there it works just fine because I have all the attributes. But the buttons at the bottom toolbar unfortunately have no aria-label- and no data-action-attributes why it's difficult for me to access them. Could you add that? Then it would also be consistent with the upper toolbar. I am also creating a similar task for Cropro.

Thank you very much!

[ailon]

I'll take a look. To be clear, you use data-action attribute as an identifier to know where to apply specific strings, correct?

[bennymeier]

I use data-action as an identifier to apply my own language constants, e.g.

const selectBtn = this.toolbar.querySelector("div[data-action='select']") as HTMLDivElement;
if (selectBtn) {
    selectBtn.ariaLabel = this.i18n.IMAGE_EDITOR_TOOLBAR_SELECT_BTN;
    selectBtn.title = this.i18n.IMAGE_EDITOR_TOOLBAR_SELECT_BTN;
}
const deleteBtn = this.toolbar.querySelector("div[data-action='delete']") as HTMLDivElement;
if (deleteBtn) {
    deleteBtn.ariaLabel = this.i18n.IMAGE_EDITOR_TOOLBAR_DELETE_BTN;
    deleteBtn.title = this.i18n.IMAGE_EDITOR_TOOLBAR_DELETE_BTN;
}

I can't use class oder title to identify the element, it looks false if you know what I mean.