added aria label capabilities for both buttons

Author: Mastermindzh

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
+
+### added
+
+Added aria labels for both the decline and accept button
+
 ## [[5.1.4](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.1.4)]
 
 ### changed

build/index.d.ts

@@ -39,6 +39,8 @@ export interface CookieConsentProps {
   overlay?: boolean;
   overlayClasses?: string;
   overlayStyle?: object;
+  ariaAcceptLabel?: string;
+  ariaDeclineLabel?: string;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

build/index.js

@@ -913,7 +913,9 @@ module.exports = /******/ (function (modules) {
                 ButtonComponent = _props4.ButtonComponent,
                 overlay = _props4.overlay,
                 overlayClasses = _props4.overlayClasses,
-                overlayStyle = _props4.overlayStyle;
+                overlayStyle = _props4.overlayStyle,
+                ariaAcceptLabel = _props4.ariaAcceptLabel,
+                ariaDeclineLabel = _props4.ariaDeclineLabel;
 
               var myStyle = {};
               var myButtonStyle = {};
@@ -970,6 +972,7 @@ module.exports = /******/ (function (modules) {
                       style: myDeclineButtonStyle,
                       className: declineButtonClasses,
                       id: declineButtonId,
+                      "aria-label": ariaDeclineLabel,
                       onClick: function onClick() {
                         _this2.decline();
                       },
@@ -987,6 +990,7 @@ module.exports = /******/ (function (modules) {
                     style: myButtonStyle,
                     className: buttonClasses,
                     id: buttonId,
+                    "aria-label": ariaAcceptLabel,
                     onClick: function onClick() {
                       _this2.accept({ acceptedByScrolling: false });
                     },
@@ -1098,6 +1102,8 @@ module.exports = /******/ (function (modules) {
         overlay: _propTypes2.default.bool,
         overlayClasses: _propTypes2.default.string,
         overlayStyle: _propTypes2.default.object,
+        ariaAcceptLabel: _propTypes2.default.string,
+        ariaDeclineLabel: _propTypes2.default.string,
       };
 
       CookieConsent.defaultProps = {
@@ -1137,6 +1143,8 @@ module.exports = /******/ (function (modules) {
         },
         overlay: false,
         overlayClasses: "",
+        ariaAcceptLabel: "Accept cookies",
+        ariaDeclineLabel: "Decline cookies",
       };
 
       exports.default = CookieConsent;

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "5.1.4",
+  "version": "5.2.0",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.d.ts

@@ -24,7 +24,7 @@ export interface CookieConsentProps {
   expires?: number;
   containerClasses?: string;
   contentClasses?: string;
-  buttonWrapperClasses?: string,
+  buttonWrapperClasses?: string;
   buttonClasses?: string;
   declineButtonClasses?: string;
   buttonId?: string;
@@ -36,9 +36,11 @@ export interface CookieConsentProps {
   enableDeclineButton?: boolean;
   flipButtons?: boolean;
   ButtonComponent?: React.ElementType;
-  overlay?: boolean,
-  overlayClasses?: string,
-  overlayStyle?: object,
+  overlay?: boolean;
+  overlayClasses?: string;
+  overlayStyle?: object;
+  ariaAcceptLabel?: string;
+  ariaDeclineLabel?: string;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

src/index.js

@@ -249,6 +249,8 @@ class CookieConsent extends Component {
       overlay,
       overlayClasses,
       overlayStyle,
+      ariaAcceptLabel,
+      ariaDeclineLabel,
     } = this.props;
 
     let myStyle = {};
@@ -304,6 +306,7 @@ class CookieConsent extends Component {
           style={myDeclineButtonStyle}
           className={declineButtonClasses}
           id={declineButtonId}
+          aria-label={ariaDeclineLabel}
           onClick={() => {
             this.decline();
           }}
@@ -319,6 +322,7 @@ class CookieConsent extends Component {
         style={myButtonStyle}
         className={buttonClasses}
         id={buttonId}
+        aria-label={ariaAcceptLabel}
         onClick={() => {
           this.accept({ acceptedByScrolling: false });
         }}
@@ -394,6 +398,8 @@ CookieConsent.propTypes = {
   overlay: PropTypes.bool,
   overlayClasses: PropTypes.string,
   overlayStyle: PropTypes.object,
+  ariaAcceptLabel: PropTypes.string,
+  ariaDeclineLabel: PropTypes.string,
 };
 
 CookieConsent.defaultProps = {
@@ -428,6 +434,8 @@ CookieConsent.defaultProps = {
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
   overlay: false,
   overlayClasses: "",
+  ariaAcceptLabel: "Accept cookies",
+  ariaDeclineLabel: "Decline cookies",
 };
 
 export default CookieConsent;