Accessibility feature request

This issue is for @reactour/tour

**As far as I can tell, using the props available to me, I am unable to control aria labels for:
1) left arrow & right arrow.
The selector is: querySelector(‘#___reactour button[data-tour-elem=“left-arrow”]’) and same for the right arrow
2) the dialog itself, note see below for the prop i tried
The selector is: querySelector(‘#___reactour div[role=“dialog”]’)
3) the navigation portion
The selector is: querySelector(‘#___reactour [data-tour-elem=“navigation”])**

On a side note, I also attempted to use the "ariaLabelledBy" portion of the accessibility prop available to me, but I did not see it take any effect:
accessibilityOptions =
{
ariaLabelledBy: string
closeButtonAriaLabel: string
showNavigationScreenReaders: boolean
}

I tried to create a span with an id and reference the id using the ariaLabelledBy prop but it did not append an aria-labelledby attribute to the dialog. Even if this worked, it would be better if we could simply add an aria-label to the dialog without referencing a visible portion of text.

**There were also some unknown divs that were tabbable but had a role of "none" / probably should not be tabbable:
.querySelectorAll(
‘#___reactour div[tabindex=“0"][data-focus-guard=“true”], #___reactour div[tabindex=“1"][data-focus-guard=“true”]’**

Below is the code I had wrote to account for the failures found with an accessibility scanning tool:
```
const setAccessibilityAttributes = (t: TFunction) => {
setTimeout(() => {
document
.querySelector(‘#___reactour [data-tour-elem=“navigation”]’)
?.setAttribute(‘aria-label’, t(‘common:tourGuideControls’));
document
.querySelectorAll(
‘#___reactour div[tabindex=“0"][data-focus-guard=“true”], #___reactour div[tabindex=“1"][data-focus-guard=“true”]’,
)
.forEach((f) => {
f.setAttribute(‘tabindex’, ‘-1’);
});
document
.querySelector(‘#___reactour button[data-tour-elem=“left-arrow”]’)
?.setAttribute(‘aria-label’, t(‘common:NavigateLeft’));
document
.querySelector(‘#___reactour button[data-tour-elem=“right-arrow”]’)
?.setAttribute(‘aria-label’, t(‘common:NavigateRight’));
document
.querySelector(‘#___reactour div[role=“dialog”]’)
?.setAttribute(‘aria-label’, t(‘common:TourGuide’));
}, 300);
```

Start by tracing the components that render the #___reactour dialog, left-arrow, right-arrow, navigation, and data-focus-guard elements, then inspect how accessibilityOptions, especially ariaLabelledBy, is applied. Done means the requested aria labels are controllable through props, ariaLabelledBy affects the dialog as documented, and the focus guards are not incorrectly tabbable; verify with an accessibility scanning tool.

Written by the indexing model from the issue text.