added aria label capabilities for both buttons

Added an explanation of the legacy cookie to the readme.

CHANGELOG.md

@@ -5,6 +5,31 @@ 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
+
+- set default SameSite attribute to "lax" because browsers are already implementing the cookie policy changes.
+
+## [[5.1.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.1.3)]
+
+### changed
+
+- Fix missing buttonWrapperClasses prop in type definition
+
+## [5.1.2]
+
+### changed
+
+- Set cookie value before handling side-effects.
+- The overlay is now conditional. Meaning that the component behaves exactly as it did prior to 5.1.0 when you do not use the overlay
+
 ## [5.1.0]
 
 A new feature! This time it's an "overlay" on the entire website to block access whilst the cookiebar is displayed.

README.md

@@ -22,6 +22,7 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
 - [Using it](#using-it)
 - [Props](#props)
 - [Debugging it](#debugging-it)
+- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies--one-of-which-named--legacy-)
 - [Styling it](#styling-it)
   - [Examples](#examples)
     - [changing the bar background to red](#changing-the-bar-background-to-red)
@@ -163,6 +164,23 @@ Because the cookie consent bar will be hidden once accepted, you will have to se
 
 **Note:** Don't forget to remove the `debug`-property for production.
 
+## Why are there two cookies? One of which named "Legacy"
+
+The short story is that some browsers don't support the SameSite=None attribute.
+The modern browsers force you to have SameSite set to something other than none.
+
+So react-cookie-consent fixes this like so:
+
+- set the fallback cookie (e.g -legacy) first, this will always succeed (on all browsers)
+- set the correct cookie second (this will work on modern browsers, fail on older ones)
+
+This happens on lines [186-192](https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L186-L192)
+
+When checking the cookie it'll do it in reverse. If the regular cookie exists, it'll use that. If no regular cookie exists it'll check whether the legacy cookie exists. If both are non-existent no consent was given.
+
+The long story can be found here: [pull-request#68](https://github.com/Mastermindzh/react-cookie-consent/pull/68)
+
+
 ## Styling it
 
 You can provide styling for the bar, the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children "content" and "button".

build/index.d.ts

@@ -24,6 +24,7 @@ export interface CookieConsentProps {
   expires?: number;
   containerClasses?: string;
   contentClasses?: string;
+  buttonWrapperClasses?: string;
   buttonClasses?: string;
   declineButtonClasses?: string;
   buttonId?: string;
@@ -38,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

@@ -622,6 +622,21 @@ module.exports = /******/ (function (modules) {
         NONE: "none",
       });
 
+      /**
+       * A function to wrap elements with a "wrapper" on a condition
+       * @param {object} wrappingOptions
+       *  condition == boolean condition, when to wrap
+       *  wrapper == style to wrap. e.g <div>{children}</div>
+       *  children == react passes whatever is between tags as children. Don't supply this yourself.
+       */
+      var ConditionalWrapper = function ConditionalWrapper(_ref) {
+        var condition = _ref.condition,
+          wrapper = _ref.wrapper,
+          children = _ref.children;
+
+        return condition ? wrapper(children) : children;
+      };
+
       var CookieConsent = (function (_Component) {
         _inherits(CookieConsent, _Component);
 
@@ -676,7 +691,7 @@ module.exports = /******/ (function (modules) {
               margin: "15px",
             },
             overlayStyle: {
-              position: "absolute",
+              position: "fixed",
               left: 0,
               top: 0,
               width: "100%",
@@ -744,25 +759,24 @@ module.exports = /******/ (function (modules) {
           },
           {
             key: "accept",
-            value: function accept(_ref) {
+            value: function accept(_ref2) {
-              var _ref$acceptedByScroll = _ref.acceptedByScrolling,
+              var _ref2$acceptedByScrol = _ref2.acceptedByScrolling,
                 acceptedByScrolling =
-                  _ref$acceptedByScroll === undefined ? false : _ref$acceptedByScroll;
+                  _ref2$acceptedByScrol === undefined ? false : _ref2$acceptedByScrol;
               var _props = this.props,
                 cookieName = _props.cookieName,
                 cookieValue = _props.cookieValue,
                 hideOnAccept = _props.hideOnAccept,
                 onAccept = _props.onAccept;
 
-              // fire onAccept
+              this.setCookie(cookieName, cookieValue);
 
+              // fire onAccept
               onAccept({ acceptedByScrolling: acceptedByScrolling });
 
               // remove listener if set
               window.removeEventListener("scroll", this.handleScroll);
 
-              this.setCookie(cookieName, cookieValue);
-
               if (hideOnAccept) {
                 this.setState({ visible: false });
               }
@@ -784,17 +798,16 @@ module.exports = /******/ (function (modules) {
                 extraCookieOptions = _props2.extraCookieOptions,
                 setDeclineCookie = _props2.setDeclineCookie;
 
-              // fire onDecline
+              if (setDeclineCookie) {
+                this.setCookie(cookieName, declineCookieValue);
+              }
 
+              // fire onDecline
               onDecline();
 
               // remove listener if set
               window.removeEventListener("scroll", this.handleScroll);
 
-              if (setDeclineCookie) {
-                this.setCookie(cookieName, declineCookieValue);
-              }
-
               if (hideOnDecline) {
                 this.setState({ visible: false });
               }
@@ -900,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 = {};
@@ -957,6 +972,7 @@ module.exports = /******/ (function (modules) {
                       style: myDeclineButtonStyle,
                       className: declineButtonClasses,
                       id: declineButtonId,
+                      "aria-label": ariaDeclineLabel,
                       onClick: function onClick() {
                         _this2.decline();
                       },
@@ -974,6 +990,7 @@ module.exports = /******/ (function (modules) {
                     style: myButtonStyle,
                     className: buttonClasses,
                     id: buttonId,
+                    "aria-label": ariaAcceptLabel,
                     onClick: function onClick() {
                       _this2.accept({ acceptedByScrolling: false });
                     },
@@ -986,20 +1003,18 @@ module.exports = /******/ (function (modules) {
                 buttonsToRender.reverse();
               }
 
-              var Wrapper = !overlay
+              return _react2.default.createElement(
-                ? function (props) {
+                ConditionalWrapper,
-                    return _react2.default.createElement("div", props);
+                {
-                  }
+                  condition: overlay,
-                : function (props) {
+                  wrapper: function wrapper(children) {
                     return _react2.default.createElement(
                       "div",
-                      _extends({}, props, { style: myOverlayStyle, className: overlayClasses })
+                      { style: myOverlayStyle, className: overlayClasses },
+                      children
                     );
-                  };
+                  },
-
+                },
-              return _react2.default.createElement(
-                Wrapper,
-                null,
                 _react2.default.createElement(
                   "div",
                   { className: "" + containerClasses, style: myStyle },
@@ -1087,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 = {
@@ -1117,15 +1134,17 @@ module.exports = /******/ (function (modules) {
         disableButtonStyles: false,
         enableDeclineButton: false,
         flipButtons: false,
-        sameSite: SAME_SITE_OPTIONS.NONE,
+        sameSite: SAME_SITE_OPTIONS.LAX,
-        ButtonComponent: function ButtonComponent(_ref2) {
+        ButtonComponent: function ButtonComponent(_ref3) {
-          var children = _ref2.children,
+          var children = _ref3.children,
-            props = _objectWithoutProperties(_ref2, ["children"]);
+            props = _objectWithoutProperties(_ref3, ["children"]);
 
           return _react2.default.createElement("button", props, children);
         },
         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.1",
+  "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",
@@ -20,7 +20,7 @@
     "patch": "npm --no-git-tag-version version patch",
     "minor": "npm --no-git-tag-version version minor",
     "major": "npm --no-git-tag-version version major",
-    "release": "npm run build && git add -A && git commit -m 'version bump and build' && git push && npm publish",
+    "release": "npm run build && git add -A && PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag $PACKAGE_VERSION && git commit -m 'release $PACKAGE_VERSION' && git push && git push --tags && npm publish",
     "release-patch": "npm run patch && npm run release",
     "release-minor": "npm run minor && npm run release",
     "release-major": "npm run major && npm run release"

src/index.d.ts

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

src/index.js

@@ -14,6 +14,17 @@ export const SAME_SITE_OPTIONS = {
   NONE: "none",
 };
 
+/**
+ * A function to wrap elements with a "wrapper" on a condition
+ * @param {object} wrappingOptions
+ *  condition == boolean condition, when to wrap
+ *  wrapper == style to wrap. e.g <div>{children}</div>
+ *  children == react passes whatever is between tags as children. Don't supply this yourself.
+ */
+const ConditionalWrapper = ({ condition, wrapper, children }) => {
+  return condition ? wrapper(children) : children;
+};
+
 class CookieConsent extends Component {
   constructor(props) {
     super(props);
@@ -60,7 +71,7 @@ class CookieConsent extends Component {
         margin: "15px",
       },
       overlayStyle: {
-        position: "absolute",
+        position: "fixed",
         left: 0,
         top: 0,
         width: "100%",
@@ -118,14 +129,14 @@ class CookieConsent extends Component {
   accept({ acceptedByScrolling = false }) {
     const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
 
+    this.setCookie(cookieName, cookieValue);
+
     // fire onAccept
     onAccept({ acceptedByScrolling });
 
     // remove listener if set
     window.removeEventListener("scroll", this.handleScroll);
 
-    this.setCookie(cookieName, cookieValue);
-
     if (hideOnAccept) {
       this.setState({ visible: false });
     }
@@ -145,16 +156,16 @@ class CookieConsent extends Component {
       setDeclineCookie,
     } = this.props;
 
+    if (setDeclineCookie) {
+      this.setCookie(cookieName, declineCookieValue);
+    }
+
     // fire onDecline
     onDecline();
 
     // remove listener if set
     window.removeEventListener("scroll", this.handleScroll);
 
-    if (setDeclineCookie) {
-      this.setCookie(cookieName, declineCookieValue);
-    }
-
     if (hideOnDecline) {
       this.setState({ visible: false });
     }
@@ -238,6 +249,8 @@ class CookieConsent extends Component {
       overlay,
       overlayClasses,
       overlayStyle,
+      ariaAcceptLabel,
+      ariaDeclineLabel,
     } = this.props;
 
     let myStyle = {};
@@ -293,6 +306,7 @@ class CookieConsent extends Component {
           style={myDeclineButtonStyle}
           className={declineButtonClasses}
           id={declineButtonId}
+          aria-label={ariaDeclineLabel}
           onClick={() => {
             this.decline();
           }}
@@ -308,6 +322,7 @@ class CookieConsent extends Component {
         style={myButtonStyle}
         className={buttonClasses}
         id={buttonId}
+        aria-label={ariaAcceptLabel}
         onClick={() => {
           this.accept({ acceptedByScrolling: false });
         }}
@@ -320,12 +335,15 @@ class CookieConsent extends Component {
       buttonsToRender.reverse();
     }
 
-    const Wrapper = !overlay
-      ? (props) => <div {...props} />
-      : (props) => <div {...props} style={myOverlayStyle} className={overlayClasses} />;
-
     return (
-      <Wrapper>
+      <ConditionalWrapper
+        condition={overlay}
+        wrapper={(children) => (
+          <div style={myOverlayStyle} className={overlayClasses}>
+            {children}
+          </div>
+        )}
+      >
         <div className={`${containerClasses}`} style={myStyle}>
           <div style={myContentStyle} className={contentClasses}>
             {this.props.children}
@@ -336,7 +354,7 @@ class CookieConsent extends Component {
             })}
           </div>
         </div>
-      </Wrapper>
+      </ConditionalWrapper>
     );
   }
 }
@@ -380,6 +398,8 @@ CookieConsent.propTypes = {
   overlay: PropTypes.bool,
   overlayClasses: PropTypes.string,
   overlayStyle: PropTypes.object,
+  ariaAcceptLabel: PropTypes.string,
+  ariaDeclineLabel: PropTypes.string,
 };
 
 CookieConsent.defaultProps = {
@@ -410,10 +430,12 @@ CookieConsent.defaultProps = {
   disableButtonStyles: false,
   enableDeclineButton: false,
   flipButtons: false,
-  sameSite: SAME_SITE_OPTIONS.NONE,
+  sameSite: SAME_SITE_OPTIONS.LAX,
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
   overlay: false,
   overlayClasses: "",
+  ariaAcceptLabel: "Accept cookies",
+  ariaDeclineLabel: "Decline cookies",
 };
 
 export default CookieConsent;

stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 2
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - good first issue
+  - security
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false