fix: Changed the order of the Save and Cancel buttons

Author: Wagner3UB

packages/volto/news/7754 copy.bugfix

@@ -0,0 +1 @@
+Changed the order of the "Save" and "Cancel" buttons on the sharing page to improve accessibility. @Wagner3UB

packages/volto/src/components/manage/Sharing/Sharing.jsx

@@ -485,11 +485,19 @@ class SharingComponent extends Component {
                   />
                 </p>
               </Segment>
-              <Segment className="actions" attached clearing>
+              <Segment className="right aligned actions" attached clearing>
+                <Button
+                  basic
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
                 <Button
                   basic
                   primary
-                  floated="right"
                   type="submit"
                   aria-label={this.props.intl.formatMessage(messages.save)}
                   title={this.props.intl.formatMessage(messages.save)}
@@ -498,16 +506,6 @@ class SharingComponent extends Component {
                 >
                   <Icon className="circled" name={aheadSVG} size="30px" />
                 </Button>
-                <Button
-                  basic
-                  secondary
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  onClick={this.onCancel}
-                >
-                  <Icon className="circled" name={clearSVG} size="30px" />
-                </Button>
               </Segment>
             </Form>
           </Plug>

packages/volto/src/components/manage/Sharing/__snapshots__/Sharing.test.jsx.snap

@@ -144,13 +144,12 @@ exports[`Sharing > renders a sharing component 1`] = `
           </p>
         </div>
         <div
-          class="ui clearing attached segment actions"
+          class="ui clearing attached segment right aligned actions"
         >
           <button
-            aria-label="Save"
-            class="ui basic primary right floated button"
-            title="Save"
-            type="submit"
+            aria-label="Cancel"
+            class="ui basic secondary button"
+            title="Cancel"
           >
             <svg
               class="icon circled"
@@ -159,15 +158,16 @@ exports[`Sharing > renders a sharing component 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18.707 5.293 17.293 6.707 27.586 17 5 17 5 19 27.586 19 17.293 29.293 18.707 30.707 31.414 18z"
+                d="M27.899 9.515 26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
                 fill-rule="evenodd"
               />
             </svg>
           </button>
           <button
-            aria-label="Cancel"
-            class="ui basic secondary right floated button"
-            title="Cancel"
+            aria-label="Save"
+            class="ui basic primary button"
+            title="Save"
+            type="submit"
           >
             <svg
               class="icon circled"
@@ -176,7 +176,7 @@ exports[`Sharing > renders a sharing component 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M27.899 9.515 26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
+                d="M18.707 5.293 17.293 6.707 27.586 17 5 17 5 19 27.586 19 17.293 29.293 18.707 30.707 31.414 18z"
                 fill-rule="evenodd"
               />
             </svg>