Provide additional context for authorization and logout button

[vmware-jaret]

Description

• Introduced the AuthorizeButton component that entails the apply authorization and remove authorization functionality, as well as a close button.
• Unit tests provided for different states.
• AuthorizeButton is able to be used for both form submit and onClick function behavior.

Motivation and Context

Fixes #8998, mainly to provide additional context in what the user can do by clicking 'Autorize' and 'Remove Authorization'.

How Has This Been Tested?

Used the swagger-react in another product and have seen that the hidden labels are added. Unittest added + Cypress test fixed.

Screenshots (if appropriate):

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[vmware-jaret]

@char0n Conscious of your limited time reviewing all the PRs and reported issues, would be nice to get some feedback both about the reported issue/enhancement and if the PR content makes sense.

[vmware-jaret]

@tim-lai Hello, could you review this PR or let me know how to expedite any review / comments?

[char0n]

Hi @vmware-jaret,

Thank you for the PR! Your changeset is on my radar, and I'll address it ASAP.

[char0n]

@vmware-jaret,

I'm not sure I fully understand the underlying intention correctly, but as far as I understand you want additional context for screen readers. Wouldn't this be achieved by ad-hoc aria-label HTML attribute instead of creating rather complex AuthorizeButton usecase component?

Original code:

<div className="auth-btn-wrapper">
  {
    nonOauthDefinitions.size === authorizedAuth.size ? <Button className="btn modal-btn auth" onClick={ this.logoutClick }>Logout</Button>
      : <Button type="submit" className="btn modal-btn auth authorize">Authorize</Button>
  }
  <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
</div>

More accessibility:

<div className="auth-btn-wrapper">
  {
    nonOauthDefinitions.size === authorizedAuth.size ? <Button className="btn modal-btn auth" onClick={ this.logoutClick }>Logout</Button>
      : <Button type="submit" className="btn modal-btn auth authorize" aria-label="Apply authorization credentials">Authorize</Button>
  }
  <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
</div>

[vmware-jaret]

Thanks @char0n. After some analysis indeed the <label /> element is not suitable for <input type='submit' /> or <button /> elements, hence changing to aria-label and removed the AuthorizationButton type all together.

[char0n]

LGTM!

[char0n]

Hi @vmware-jaret,

I've changed Logout label slightly to more match the context of the page. The PR is approved, and thank you again for opening this topic.