XWIKI-22495: Missing text content in the resource picker dropdown (#3612

)

* Added a translated title/content to the dropdown toggle
* Updated the style to allow for the use of .sr-only in this specific context (overriding CKEditor CSS reset)

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-resource/resourcePicker.js

@@ -19,7 +19,8 @@
  */
 define('resourcePickerTranslationKeys', [], [
   'attach.hint',
-  'doc.hint'
+  'doc.hint',
+  'dropdown.toggle.title'
 ]);
 
 define('resourcePicker', [
@@ -36,6 +37,7 @@ define('resourcePicker', [
             '<span class="icon">' +
           '</button>' +
           '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">' +
+            '<span class="sr-only"></span>' +
             '<span class="caret"></span>' +
           '</button>' +
           '<ul class="resourceTypes dropdown-menu dropdown-menu-right"></ul>' +
@@ -48,6 +50,8 @@ define('resourcePicker', [
     options = options || {};
 
     var resourcePicker = $(resourcePickerTemplate);
+    resourcePicker.find('button.dropdown-toggle').attr('title', translations.get('dropdown.toggle.title'));
+    resourcePicker.find('button.dropdown-toggle .sr-only').text(translations.get('dropdown.toggle.title'));
     resourcePicker.data("options", options);
     element.on('selectResource', onSelectResource).hide().after(resourcePicker);
 

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml

@@ -1019,6 +1019,23 @@ body[data-maximized="true"] {
 .cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
   border-color: @table-border-color;
   border-style: solid;
+}
+
+/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
+However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
+We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
+Without this, the elements with this class are still shown which would be different from the behaviour 
+of `.sr-only` anywhere else in XWiki (as described in our doc).
+This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
+.cke_reset_all .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }</code>
     </property>
     <property>

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml

@@ -301,6 +301,7 @@ resource.user.placeholder=alias
 
 resourcePicker.attach.hint=Select an attachment
 resourcePicker.doc.hint=Select a page
+resourcePicker.dropdown.toggle.title=Toggle the display of resource types.
 
 entityResourceSuggester.doc.placeholder=Find a page...
 entityResourceSuggester.attach.placeholder=Find an attachment...