[Improvement] Add data-kjb-element attributes to Sage React components

[jennifer-mullen]

Description

UI test automation needs to be able to locate elements based on attributes in the DOM. Currently, most locators are based on CSS classes. This is unreliable and makes UI automation dependent on the presentation of the app. These locators are likely to break when minor UI changes are made to the app. The best practice for UI automation is to add test ID attribute to the elements that UI tests interact with. This attribute should be used only for automated UI tests. The attribute should only change when the functionality in the app changes. This allows developers to change the presentation (styles, element tag type, etc) without breaking UI automation.

We already use the attribute data-kjb-element on Ruby components. I would like to add them to the Sage React components as well.

I have a local branch where I've added them to the components that we use in our test automation. I can push the branch if you'd like to take a look.

Design

https://kajabi.atlassian.net/wiki/spaces/QA/pages/2681733155/WIP+Test+IDs+for+UI+automation+in+React

Additional Information

Please see the inline examples in the design document.

[monicawheeler]

Issue has been added to Jira project: https://kajabi.atlassian.net/browse/DSS-1222
For future requests, please feel free to check out our IT Portal! https://kajabi.atlassian.net/servicedesk/customer/portal/51