Introduce data-qa-selector to supplant .qa-class

EE Port: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14623

What does this MR do?

Iteration on moving away from using CSS classes for GitLab QA framework element identification.

The first iteration will involve allowing the fallback use of old CSS classes.

For instance:

devise.html.haml

%body.qa-login-page
%body{data: { qa_selector: 'login_page' } }

login.rb

view 'devise.html.haml' do
  # will use a CSS OR match:
  #   [data-qa-selector='login_page'],.qa-login-page
  element :login_page

  # it will prioritize [data-qa-selector] first.
end

Does this MR meet the acceptance criteria?

Conformity

• Documentation created/updated or follow-up review issue created
• Code review guidelines
• Merge request performance guidelines
• Style guides

Performance and testing

No performance degradation or improvement will be seen from using data-qa-* versus CSS classes.

Quality Requirements

• Works for both [data-qa-selector='something'] and .qa-something
• Spec created
• Cop updated
• qa:selectors job updated?
• Login page selectors changed from qa- to data-qa-selector