ENH Hide PHP font icons from screen readers (#1381)

Author: GuySartorelli

client/dist/js/bundle.js

@@ -84,9 +84,10 @@ class AddElementPopover extends Component {
     );
 
     const buttons = elementTypes.map((elementType) => ({
-      content: elementType.title,
+      content: <span className="btn__title">{elementType.title}</span>,
       key: elementType.name,
-      className: classNames(elementType.icon, 'btn--icon-xl', 'element-editor-add-element__button'),
+      className: classNames('btn--icon-xl', 'element-editor-add-element__button'),
+      icon: elementType.icon.replace(/^(font-icon-)/g, ''),
       onClick: this.getElementButtonClickHandler(elementType),
     }));
 

client/src/components/ElementEditor/AddElementPopover.js

@@ -1,5 +1,5 @@
 <% if $IconClass %>
-    <i class="$IconClass"></i>
+    <span class="$IconClass" aria-hidden="true"></span>
 <% end_if %>
 
 <% if $IsVersioned && $VersionState %>

templates/DNADesign/Elemental/Models/BaseElement/PreviewIcon.ss

@@ -15,33 +15,33 @@ Feature: Unsaved changes are identified by changetracker
     # Note we can't just check for "Save" vs "Saved" because one is a subset of the other,
     # so `I should not see a "Save" button` will always fail when the "Saved" button is present.
     # Instead, font-icon-tick is a CSS class on the "Saved" button, and font-icon-save is on the "Save" button
-    Then I should see the "button.font-icon-tick" element
-    Then I should not see the "button.font-icon-save" element
+    Then I should see the "button .font-icon-tick" element
+    Then I should not see the "button .font-icon-save" element
     # Just opening the block doesn't get seen as a "change"
     When I click on the caret button for block 1
-    Then I should see the "button.font-icon-tick" element
-    Then I should not see the "button.font-icon-save" element
+    Then I should see the "button .font-icon-tick" element
+    Then I should not see the "button .font-icon-save" element
     # Update the title
     # For some reason, using the usual 'When I fill in "changed" for "Title" for block 1'
     # it fails to recognise the change in CI even though it works locally for some people.
     When I focus on the "#Form_ElementForm_1_Title" element
     And I type "changed" in the field
     # When I fill in "changed" for "Title" for block 1
-    Then I should not see the "button.font-icon-tick" element
-    Then I should see the "button.font-icon-save" element
+    Then I should not see the "button .font-icon-tick" element
+    Then I should see the "button .font-icon-save" element
     # Change it back
     When I fill in "" for "Title" for block 1
     When I focus on the "#Form_ElementForm_1_Title" element
     And I type "My title" in the field
-    Then I should see the "button.font-icon-tick" element
-    Then I should not see the "button.font-icon-save" element
+    Then I should see the "button .font-icon-tick" element
+    Then I should not see the "button .font-icon-save" element
     # Update the HTML content
     When I fill in "<p>New sample content</p>" for "Content" for block 1
-    Then I should not see the "button.font-icon-tick" element
-    Then I should see the "button.font-icon-save" element
+    Then I should not see the "button .font-icon-tick" element
+    Then I should see the "button .font-icon-save" element
     # Change it back
     When I fill in "<p>My content</p>" for "Content" for block 1
-    Then I should see the "button.font-icon-tick" element
-    Then I should not see the "button.font-icon-save" element
+    Then I should see the "button .font-icon-tick" element
+    Then I should not see the "button .font-icon-save" element
     # Don't click save at the end - there should be no alert because there were no changes
 

tests/Behat/features/change-tracking.feature

@@ -38,7 +38,6 @@ Feature: Blocks are validated when saving blocks on a non-page dataobject
     # Click "Add element" button
     And I click on the "#Form_ItemEditForm_ElementalArea2 .element-editor__toolbar button" element
     # Select ElementContent block type
-    # And I click on the ".font-icon-block-content" element
     And I click "Content" in the ".popover-option-set__button-container" element
     # Open the inline edit form for the newly added block
     And I click on the caret button for block 2

tests/Behat/features/non-page-save-validation.feature

@@ -40,7 +40,6 @@ Feature: Blocks are validated when page saving blocks
     # Click "Add element" button
     And I click on the "#Form_EditForm_ElementalArea2 .element-editor__toolbar button" element
     # Select ElementContent block type
-    # And I click on the ".font-icon-block-content" element
     And I click "Content" in the ".popover-option-set__button-container" element
     # Open the inline edit form for the newly added block
     And I click on the caret button for block 2