Repository: shipshapecode/shepherd (language: javascript)

Issue:
Accessibility issue: unnecessary tabstop
This is tangentially related to #3065 and relates to focus management

Per the [W3C's APG](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/): "Generally, focus is initially set on the first focusable element. However, the most appropriate focus placement will depend on the nature and size of the content"

So, as the discussion in #3065 mentions, the Close button would be the more appropriate location for focus to be sent.

Another issue, which I'm raising, is that there's an inner `div` with `tabindex="0"`.  That `tabindex` should be removed -  firstly because the only things that are given a `tabindex` are things which are actionable, and secondly because it causes an unnecessary 2nd announcement of the dialog.

https://us06web.zoom.us/clips/share/A2F3MRZqZXlld0NNQ1NVaTdjbTFCZ2lIQXBBAQ

All-in-all, I want to thank you for creating this. It is really good and does mostly a great job with accessibility, which is very important to me.


Discussion / hints:
For anyone implementing this, you can get rid of the unnecessary tab stop when creating your tour:

```
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: true,
    canClickTarget: false,
    showCancelLink: true,
    modal: true,
    when: {
      show: () => {
        // Remove tabindex from all shepherd-content elements
        document.querySelectorAll('.shepherd-content').forEach(element => {
          element.removeAttribute('tabindex');
        });
      }
    },
  },
  useModalOverlay: true,
});
```

Note that this removes the tabindex using the `when` hook

Fix patch:
diff --git a/shepherd.js/src/components/shepherd-content.svelte b/shepherd.js/src/components/shepherd-content.svelte
index bcc47285c..4d5031ed5 100644
--- a/shepherd.js/src/components/shepherd-content.svelte
+++ b/shepherd.js/src/components/shepherd-content.svelte
@@ -7,7 +7,7 @@
   export let descriptionId, labelId, step;
 </script>
 
-<div class="shepherd-content" tabindex="0">
+<div class="shepherd-content">
   {#if !isUndefined(step.options.title) || (step.options.cancelIcon && step.options.cancelIcon.enabled)}
     <ShepherdHeader {labelId} {step} />
   {/if}


Test patch:
diff --git a/test/cypress/integration/a11y.cy.js b/test/cypress/integration/a11y.cy.js
index c5a45afd0..2944120b9 100644
--- a/test/cypress/integration/a11y.cy.js
+++ b/test/cypress/integration/a11y.cy.js
@@ -75,7 +75,8 @@ describe('a11y', () => {
 
       cy.document().then(() => {
         cy.wait(1000);
-        cy.get('.shepherd-content').tab().tab().tab().tab().tab().tab().tab();
+        // Tabbing out of the modal should not be possible and we test this by tabbing from the body
+        cy.get('body').tab().tab().tab().tab().tab().tab();
         cy.get('[data-test-popper-link]').should('have.focus');
       });
     });