feat: Add x-logo alt text support (#584)

Fixes #546

demo/big-openapi.json

@@ -25,7 +25,8 @@
     "termsOfService": "https://www.rebilly.com/terms/",
     "x-logo": {
       "url": "https://rebilly.github.io/RebillyAPI/rb_apiLogo.svg",
-      "backgroundColor": "#0033A0"
+      "backgroundColor": "#0033A0",
+      "altText": "Rebilly API logo"
     },
     "description": "# Introduction\nThe Rebilly API is built on HTTP.  Our API is RESTful.  It has predictable\nresource URLs.  It returns HTTP response codes to indicate errors.  It also\naccepts and returns JSON in the HTTP body.  You can use your favorite\nHTTP/REST library for your programming language to use Rebilly's API, or\nyou can use one of our SDKs (currently available in [PHP](https://github.com/Rebilly/rebilly-php)\nand [C#](https://github.com/Rebilly/rebilly-dotnet-client)).\n\n# Authentication\nWhen you sign up for an account, you are given your first API key.\nYou can generate additional API keys, and delete API keys (as you may\nneed to rotate your keys in the future). You authenticate to the\nRebilly API by providing your secret key in the request header.\n\nRebilly offers three forms of authentication:  private key, JSON Web Tokens, and\npublic key.\n- private key: authenticates each request by searching for the presence\nof an HTTP header: REB-APIKEY.\n- JWT: authenticates each request by the HTTP header: Authorization.\n- public key: authenticates by the HTTP header: REB-AUTH (read more on this below).\n\nRebilly also offers JSON Web Tokens (JWT) authentication, where you can control\nthe specific granular permissions and expiration for that JWT.  We call our resource\nfor generating JWT [Sessions](#tag/Sessions).\n\nRebilly also has a client-side authentication scheme that uses an\napiUser and HMAC-SHA1 signature (only for the Tokens resource), so\nthat you may safely create tokens from the client-side without compromising\nyour secret keys.\n\nNever share your secret keys. Keep them guarded and secure.\nThe client-side authentication scheme uses one HTTP header named REB-AUTH.\n\n\n\n# PHP SDK\nFor all PHP SDK examples provided in this spec you will need to configure `$client`.\nYou may do it like this:\n\n```php\n$client = new Rebilly\\Client([\n    'apiKey' => 'YourApiKeyHere',\n    'baseUrl' => 'https://api.rebilly.com',\n]);\n```\n"
   },

demo/openapi.yaml

@@ -49,6 +49,7 @@ info:
     url: https://github.com/Rebilly/ReDoc
   x-logo:
     url: 'https://rebilly.github.io/ReDoc/petstore-logo.png'
+    altText: Petstore logo
   license:
     name: Apache 2.0
     url: 'http://www.apache.org/licenses/LICENSE-2.0.html'

demo/swagger.yaml

@@ -42,6 +42,7 @@ info:
     url: https://github.com/Rebilly/ReDoc
   x-logo:
     url: 'https://rebilly.github.io/ReDoc/petstore-logo.png'
+    altText: Petstore logo
   license:
     name: Apache 2.0
     url: 'http://www.apache.org/licenses/LICENSE-2.0.html'

docs/redoc-vendor-extensions.md

@@ -95,6 +95,7 @@ The information about API logo
 | :-------------- | :------: | :---------- |
 | url             | string   | The URL pointing to the spec logo. MUST be in the format of a URL. It SHOULD be an absolute URL so your API definition is usable from any location
 | backgroundColor | string   | background color to be used. MUST be RGB color in [hexadecimal format] (https://en.wikipedia.org/wiki/Web_colors#Hex_triplet)
+| altText        | string   | Text to use for alt tag on the logo. Defaults to 'logo' if nothing is provided.
 
 
 ###### x-logo example
@@ -106,7 +107,8 @@ json
     "title": "Swagger Petstore",
     "x-logo": {
       "url": "https://rebilly.github.io/ReDoc/petstore-logo.png",
-      "backgroundColor": "#FFFFFF"
+      "backgroundColor": "#FFFFFF",
+      "altText": "Petstore logo"
     }
   }
 }
@@ -119,6 +121,7 @@ info:
   x-logo:
     url: "https://rebilly.github.io/ReDoc/petstore-logo.png"
     backgroundColor: "#FFFFFF"
+    altText: "Petstore logo"
 ```
 
 

src/components/ApiLogo/ApiLogo.tsx

@@ -12,8 +12,15 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
       return null;
     }
 
+    // Use the english word logo if no alt text is provided
+    const altText = logoInfo.altText ? logoInfo.altText : 'logo';
+
     const logo = (
-      <LogoImgEl src={logoInfo.url} style={{ backgroundColor: logoInfo.backgroundColor }} />
+      <LogoImgEl
+        src={logoInfo.url}
+        style={{ backgroundColor: logoInfo.backgroundColor }}
+        alt={altText}
+      />
     );
     return (
       <LogoWrap>