From 2c041536146977b912576def1b0452ad55804145 Mon Sep 17 00:00:00 2001
From: Jelle Aret <110115731+vmware-jaret@users.noreply.github.com>
Date: Thu, 7 Sep 2023 10:00:03 +0200
Subject: [PATCH] feat(a11y): provide additional context for authorization and
 logout button (#8999)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #8998

Co-authored-by: Vladimír Gorej <vladimir.gorej@gmail.com>
---
 src/core/components/auth/auths.jsx                  |  4 ++--
 src/core/components/auth/oauth2.jsx                 |  4 ++--
 .../e2e/features/oauth2-flows/application.cy.js     |  9 +++++++++
 test/e2e-cypress/e2e/security/apikey.cy.js          | 13 +++++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 test/e2e-cypress/e2e/security/apikey.cy.js

diff --git a/src/core/components/auth/auths.jsx b/src/core/components/auth/auths.jsx
index c2a51ead9c1..57a8505873b 100644
--- a/src/core/components/auth/auths.jsx
+++ b/src/core/components/auth/auths.jsx
@@ -88,8 +88,8 @@ export default class Auths extends React.Component {
             }
             <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>
+                nonOauthDefinitions.size === authorizedAuth.size ? <Button className="btn modal-btn auth" onClick={ this.logoutClick } aria-label="Remove authorization">Logout</Button>
+              : <Button type="submit" className="btn modal-btn auth authorize" aria-label="Apply credentials">Authorize</Button>
               }
               <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
             </div>
diff --git a/src/core/components/auth/oauth2.jsx b/src/core/components/auth/oauth2.jsx
index 487004c973b..d41a90356d9 100644
--- a/src/core/components/auth/oauth2.jsx
+++ b/src/core/components/auth/oauth2.jsx
@@ -268,8 +268,8 @@ export default class Oauth2 extends React.Component {
         }
         <div className="auth-btn-wrapper">
         { isValid &&
-          ( isAuthorized ? <Button className="btn modal-btn auth authorize" onClick={ this.logout }>Logout</Button>
-        : <Button className="btn modal-btn auth authorize" onClick={ this.authorize }>Authorize</Button>
+          ( isAuthorized ? <Button className="btn modal-btn auth authorize" onClick={ this.logout } aria-label="Remove authorization">Logout</Button>
+        : <Button className="btn modal-btn auth authorize" onClick={ this.authorize } aria-label="Apply given OAuth2 credentials">Authorize</Button>
           )
         }
           <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
diff --git a/test/e2e-cypress/e2e/features/oauth2-flows/application.cy.js b/test/e2e-cypress/e2e/features/oauth2-flows/application.cy.js
index 41a66caeda5..653d890ef19 100644
--- a/test/e2e-cypress/e2e/features/oauth2-flows/application.cy.js
+++ b/test/e2e-cypress/e2e/features/oauth2-flows/application.cy.js
@@ -14,6 +14,15 @@ describe("OAuth2 Application flow", function() {
       .should("have.id", "oauth_username")
   })
 
+  it("should have specific OAuth2 description for authorization button", () => {
+    cy
+      .visit("/?url=http://localhost:3231/swagger.yaml")
+      .get(".btn.authorize")
+      .click()
+      .get(".auth-btn-wrapper > .authorize")
+      .should("have.attr", "aria-label", "Apply given OAuth2 credentials")
+  })
+
   it("should make an application flow Authorization header request", () => {
     cy
       .visit("/?url=http://localhost:3231/swagger.yaml")
diff --git a/test/e2e-cypress/e2e/security/apikey.cy.js b/test/e2e-cypress/e2e/security/apikey.cy.js
new file mode 100644
index 00000000000..1e66ed0590e
--- /dev/null
+++ b/test/e2e-cypress/e2e/security/apikey.cy.js
@@ -0,0 +1,13 @@
+describe("ApiKey Authorization", function() {
+  it("should have generic description for authorization button", () => {
+    cy
+      .visit("/?url=/documents/petstore.swagger.yaml")
+      .get(".btn.authorize") // open authorization dialog
+      .click()
+      .get(".modal-ux-content > :nth-child(2)") // only deal with api_key for this test
+      .within(() => {
+        cy.get(".auth-btn-wrapper .authorize")
+          .should("have.attr", "aria-label", "Apply credentials")
+      })
+  })
+})