improve the alert examples

Author: silviuaavram

docs/data/material/components/dialogs/AlertDialog.js

@@ -39,10 +39,10 @@ export default function AlertDialog() {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Disagree</Button>
           <Button onClick={handleClose} autoFocus>
-            Agree
+            Disagree
           </Button>
+          <Button onClick={handleClose}>Agree</Button>
         </DialogActions>
       </Dialog>
     </React.Fragment>

docs/data/material/components/dialogs/AlertDialog.tsx

@@ -39,10 +39,10 @@ export default function AlertDialog() {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Disagree</Button>
           <Button onClick={handleClose} autoFocus>
-            Agree
+            Disagree
           </Button>
+          <Button onClick={handleClose}>Agree</Button>
         </DialogActions>
       </Dialog>
     </React.Fragment>

docs/data/material/components/dialogs/AlertDialogSlide.js

@@ -45,7 +45,9 @@ export default function AlertDialogSlide() {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Disagree</Button>
+          <Button onClick={handleClose} autoFocus>
+            Disagree
+          </Button>
           <Button onClick={handleClose}>Agree</Button>
         </DialogActions>
       </Dialog>

docs/data/material/components/dialogs/AlertDialogSlide.tsx

@@ -51,7 +51,9 @@ export default function AlertDialogSlide() {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Disagree</Button>
+          <Button onClick={handleClose} autoFocus>
+            Disagree
+          </Button>
           <Button onClick={handleClose}>Agree</Button>
         </DialogActions>
       </Dialog>

docs/data/material/components/dialogs/dialogs.md

@@ -42,7 +42,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 
 Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.
 
-Use `role="alertdialog"` when creating an Alert Dialog. This provides assistive technologies the correct purpose of the Dialog.
+Use `role="alertdialog"` to create an Alert Dialog. This provides assistive technologies the correct purpose of the Dialog.
 
 Most alerts don't need titles.
 They summarize a decision in a sentence or two by either: