Prop to add aria-labelledby attribute for accessibility

Author: nelsonwong1012

README.md

@@ -87,6 +87,12 @@ Type: `func`
 <Tour badgeContent={(curr, tot) => `${curr} of ${tot}`} />
 ```
 
+#### ariaLabelledBy
+
+> `ariaLabelledBy` attribute to associate the dialog with a title for screen readers (accessibility)
+
+Type: `string`
+
 #### children
 
 > Content to be rendered inside the _Helper_

src/Tour.js

@@ -52,6 +52,7 @@ function Tour({
   maskSpace,
   showCloseButton,
   closeButtonAriaLabel,
+  ariaLabelledBy,
 }) {
   const [current, setCurrent] = useState(0)
   const [started, setStarted] = useState(false)
@@ -310,6 +311,7 @@ function Tour({
             [CN.helper.isOpen]: isOpen,
           })}
           role="dialog"
+          aria-labelledby={ariaLabelledBy}
         >
           {CustomHelper ? (
             <CustomHelper

src/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 
 export const propTypes = {
+  ariaLabelledBy: PropTypes.string,
   badgeContent: PropTypes.func,
   highlightedMaskClassName: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),