diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css
index 00c147c..6632bde 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme.css
@@ -182,6 +182,7 @@
 .responsive-preview-device-label {
   bottom: 0;
   color: #bbbbbb;
+  cursor: pointer;
   font-family: sans-serif;
   font-weight: normal;
   left: 30px;
@@ -194,26 +195,37 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.responsive-preview-device-details-trigger {
-  color: #666;
-  cursor: pointer;
-}
-.responsive-preview-device-details-trigger:hover {
-  color: #bbb;
+.responsive-preview-device-label-text:after {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  border-style: solid;
+  border-width: 0.8ex 0 0.8ex 0.9ex;
+  color: #666666;
+  content: '';
+  display: inline-block;
+  line-height: 0;
+  margin-left: 0.75ex;
+  margin-right: 0.75ex;
+  width: 0;
 }
-.responsive-preview-device-label-details,
-.responsive-preview-device-details-comma {
-  display: none;
+[dir="rtl"] .responsive-preview-device-label-text:after {
+  border-left-color: transparent;
+  border-right-color: inherit;
+  border-width: 0.8ex 0.9ex 0.8ex 0;
 }
-.responsive-preview-expanded.responsive-preview-device-label {
-  cursor: pointer;
+.responsive-preview-device-label-text:hover:after {
+  color: inherit;
 }
-.responsive-preview-expanded .responsive-preview-device-label-details,
-.responsive-preview-expanded .responsive-preview-device-details-comma {
-  display: inline;
+.responsive-preview-expanded .responsive-preview-device-label-text:after {
+  border-left-color: transparent;
+  border-right-color: inherit;
+  border-width: 0.8ex 0.9ex 0.8ex 0;
 }
-.responsive-preview-expanded .responsive-preview-device-details-trigger {
-  display: none;
+[dir="rtl"] .responsive-preview-expanded .responsive-preview-device-label-text:after {
+  border-left-color: inherit;
+  border-right-color: transparent;
+  border-width: 0.8ex 0 0.8ex 0.9ex;
 }
 
 /**
diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js
index 9c1c55f..048917e 100644
--- a/core/modules/responsive_preview/js/responsive-preview.js
+++ b/core/modules/responsive_preview/js/responsive-preview.js
@@ -14,7 +14,6 @@ var options = $.extend({
   // therefore it must be defined here instead of in the CSS file.
   bleed: 30,
   strings: {
-    details: Drupal.t('details'),
     close: Drupal.t('Close'),
     orientation: Drupal.t('Change orientation'),
     portrait: Drupal.t('Portrait'),
@@ -723,7 +722,11 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
       // Update the device label.
       var $label = $container.find('.responsive-preview-device-label');
       // Expose the details if the user has expanded the label.
-      $label.toggleClass('responsive-preview-expanded', this.model.get('isDetailsExpanded'));
+      var isDetailsExpanded = this.model.get('isDetailsExpanded');
+      $label
+        .toggleClass('responsive-preview-expanded', isDetailsExpanded)
+        .find('.responsive-preview-device-label-details')
+        .toggleClass('visually-hidden', !isDetailsExpanded);
       // Attach the device label.
       $label
         .find('.responsive-preview-device-label-text')
@@ -987,9 +990,11 @@ $.extend(Drupal.theme, {
     return '<div id="responsive-preview-frame-container" class="responsive-preview-frame-container" aria-describedby="responsive-preview-frame-label">' +
       '<label id="responsive-preview-frame-label" class="responsive-preview-device-label" for="responsive-preview-frame-container">' +
         '<span class="responsive-preview-device-label-text"></span>' +
-        '<span class="responsive-preview-device-details-trigger">&#32;' + strings.details + '</span>' +
-        '<span class="responsive-preview-device-details-comma">&#44;&#32;</span>' + /* ', ' */
-        '<span class="responsive-preview-device-label-details"></span>' +
+        // The space is necessary to prevent screen readers from pronouncing a
+        // run-on word between the last word of the label and the first word
+        // of the details.
+        '<span>&#32;</span>' +
+        '<span class="responsive-preview-device-label-details visually-hidden"></span>' +
       '</label>' +
       '<button id="responsive-preview-close" title="' + strings.close + '" role="button" class="responsive-preview-icon responsive-preview-icon-close responsive-preview-control responsive-preview-close" aria-pressed="false"><span class="visually-hidden">' + strings.close + '</span></button>' +
       '<button id="responsive-preview-orientation" title="' + strings.orientation + '" role="button" class="responsive-preview-icon responsive-preview-icon-orientation responsive-preview-control responsive-preview-orientation" aria-pressed="false"><span class="visually-hidden">' + strings.orientation + '</span></button>' +