Attach a UI component name in its view representation

[pomek]

📝 Provide a description of the new feature

To give developers the ability to find a UI component via the programmatically API, it would be good to include a data attribute in the toolbar elements.

Example:

document.querySelector( '[data-cke-component-name="bold"]' );

Would return:

<button class="ck ck-button ck-off" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_e97995583af36c0b5559f509c1fa22e26" aria-pressed="false" data-cke-tooltip-text="Bold (Ctrl+B)" data-cke-tooltip-position="s" data-cke-component-name="bold">
    <!-- ... -->
</button>

I wouldn't like to depend on tooltips as they can change at any time, and it's not even noticeable in the changelog.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[Witoso]

To add more use cases, we also struggled in the past to measure clicks in toolbars in the docs, due to the lack of easy to access attribute.

[pomek]

See: #16388 (comment).