feat(a11y): provide additional context for authorization and logout b…

…utton (swagger-api#8999)

Refs swagger-api#8998

Co-authored-by: Vladimír Gorej <[email protected]>

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>

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>

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")

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")
+      })
+  })
+})