Files
swagger-ui/src/core/components/auth/authorize-operation-btn.jsx
maryscar 2f236982f8 improve(a11y): visibility accessibility via aria-label (#4127)
* Added aria-label for visual readers.

* Increased font weight for Models section span to meet contrast ratio visibility requirements.
2018-01-25 12:41:26 -08:00

34 lines
861 B
JavaScript

import React from "react"
import PropTypes from "prop-types"
export default class AuthorizeOperationBtn extends React.Component {
static propTypes = {
isAuthorized: PropTypes.bool.isRequired,
onClick: PropTypes.func
}
onClick =(e) => {
e.stopPropagation()
let { onClick } = this.props
if(onClick) {
onClick()
}
}
render() {
let { isAuthorized } = this.props
return (
<button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"}
aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
onClick={this.onClick}>
<svg width="20" height="20">
<use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
</svg>
</button>
)
}
}