DialogButton Readme example not accurate

[moog16]

An internally reported issue regarding the first example in the dialog readme:

isDefault does not work on Accept, but instead appears on Dismiss.

      <Dialog open={isOpen}>
        <DialogTitle>My Dialog</DialogTitle>
        <DialogContent>
          <MyDialogContent />
        </DialogContent>
        <DialogFooter>
          <DialogButton action='dismiss'>Dismiss</DialogButton>
          <DialogButton action='accept' isDefault>Accept</DialogButton>
        </DialogFooter>
      </Dialog>```

[chrishoward]

Am also seeing this in my use of Dialog. If you swap buttons in code it works on accept, so first button seems to be default.

[BudickDa]

I think this has something to do with focus-trap, which makes the dialog accessible.

This is my understanding of the code so far: Dialog opens, creates a focus-trap instance, with the dialog-element as parameter by calling createFocusTrapInstance.

Focus-trap puts the focus on the first element as default (Demo).

To focus on another element (e. g. the one with isDefault=true), createFocusTrapInstance needs the element as parameter. I found no way to set this parameter. A reference to the trapInstance is saved as class-variable focusTrap. I did not find a way to interact with this variable.

The only work-around I found was, to reverse the order of the buttons and reverse them back using CSS3:

<DialogFooter style={{'flex-direction': 'row-reverse'}}>
  <DialogButton action='accept' isDefault>Accept</DialogButton>
  <DialogButton action='dismiss'>Dismiss</DialogButton>
</DialogFooter>

I think this work-around makes sense, because it gives the best UX for people that can see the UI (button for the default choice is on the right site) and for people using a screen reader (button for default is read out first + tab order is consistent with the read out buttons). I am not an expert on a11y so maybe I am missing something.

But please fix the docs or implement isDefault correctly, because the current implementation is doing accessibility a disservice (in german: Bärendienst). This is one of those issues that makes developer do stupid things to save time, like giving tab-index=1 to the accept button (please don't do it) which would also work, but would make the app/website probably unusable for people using a screen reader.