General: Some minor adjustments for the Site Icon option:

* Improve buttons flow on small viewports, taking longer translations into account.
* Make `alt` attributes translatable.
* Remove unused `id` attributes.

Follow-up to [57602].

Props kebbet, afercia, mukesh27.
See #54370.

git-svn-id: https://develop.svn.wordpress.org/trunk@57618 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/site-icon.css

@@ -60,7 +60,6 @@
 	border-color: transparent;
 	box-shadow: none;
 	background: transparent;
-	margin: 0 10px;
 }
 
 .site-icon-section button.reset:focus,
@@ -70,3 +69,9 @@
 	border-color: #b32d2e;
 	box-shadow: 0 0 0 1px #b32d2e;
 }
+
+.site-icon-section .action-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}

src/wp-admin/options-general.php

@@ -125,14 +125,14 @@ $tagline_description = sprintf(
 		<div class="favicon-preview">
 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
 			<div class="favicon">
-				<img src="<?php site_icon_url(); ?>" alt="Preview as a browser icon">
+				<img src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>">
 			</div>
 			<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
 		</div>
-		<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="Preview as an app icon">
+		<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
 	</div>
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
-	<p>
+	<div class="action-buttons">
 		<button type="button"
 			id="choose-from-library-link"
 			type="button"
@@ -158,12 +158,12 @@ $tagline_description = sprintf(
 		>
 			<?php _e( 'Remove Site Icon' ); ?>
 		</button>
-	</p>
+	</div>
 
-	<p class="description" id="site-icon-description">
+	<p class="description">
 		<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>
 	</p>
-	<p class="description" id="site-icon-further-description">
+	<p class="description">
 		<?php
 			/* translators: %s: Site Icon size in pixels. */
 			printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );