[Branda] Branda Admin bar menu and display issues

Hi WPMU Dev,
We're having some trouble with the Branda plugin changes to the admin bar.

Our setup:
Rather than using a custom icon, we dropped an <img> into a custom menu entry in the admin bar. This recently changed and started displaying the raw HTML, rather than the image. The image still exists in the correct location. Screenshot is included here: https://drive.google.com/a/nyu.edu/file/d/1O3zGWISM-Pu9j7eHhlMMkBr2yIhmc8ET/view

(We set up our admin bar in this way because the logo does not have a way to include alt text, which is required for accessibility.)

I went to Network Admin -> Branda -> Admin area to attempt to edit this, but when I click the cog to edit my custom menu item, there are no settings in the popover (https://drive.google.com/a/nyu.edu/file/d/1pHBvW_7tB-oH8LhF0HYVNWcPdVeXmUim/view?usp=drivesdk). When I click cancel it gives me a the warning message about permanently deleting a menu item. This can't be dismissed. There is a JavaScript error in the console:

Uncaught TypeError: $ is not a function
at Object.Branda.admin_bar_row_buttons_bind (admin-bar.js?ver=3.1.1:23)
at HTMLDocument.<anonymous> (admin-bar.js?ver=3.1.1:476)
at i (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.1.1:2)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.1.1:2)
at Function.ready (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.1.1:2)
at HTMLDocument.K (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.1.1:2)

Please let me know if you need any further information.

  • Nithin

    Hi Web Publishing,

    Hope you are doing good today. :slight_smile:

    I'm afraid the Title field in the Custom Item doesn't support HTML elements, and the image is only supported when only the link is added.

    I could notice the similar behaviour if HTML is added in the Title, however, I wasn't able to replicate the issue as shown in your second screenshot.

    I could edit the changes done in my system when tested. I'm afraid there isn't any out of the box settings to add alt texts to such images.

    I'll bring this into our developer's attention so that this feature could be considered down the road. If you are looking for a quick workaround, we could provide a jQuery to add alt text for such case.

    Please do delete the existing custom item, and add only the image, and enable support access, so that I could check, and provide a working code for this.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please let us know once you enable access so that we could get this sorted. Have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

  • Web Publishing

    Thanks, Nithin. Fair enough that it's not supported, we were probably using a loophole until the last updates.

    I can't provide access due to privacy regulations, but is there more information I can provide so we can at least get the settings working again? Thank you.

    Lastly, I urge you to consider alt text as a priority. Institutional customers will no longer be able to work with you if your products cannot meet accessibility standards, alt text for images being one of the most basic.

  • Nithin

    Hi Web Publishing,

    Hope you are doing good today. :slight_smile:

    I can't provide access due to privacy regulations, but is there more information I can provide so we can at least get the settings working again? Thank you.

    The workaround would be to add alt text via jQuery. However, the code can vary, maybe you could try the following, and see whether it works:

    <?php
    
    function wpmu_admin_inline_js(){
    ?>
    
        <script type="text/javascript">
          jQuery(document).ready(function() {
    
    		jQuery('#wp-admin-bar-root-default > li:nth-child(2) > a > span > img').attr('alt', 'Alternative text');
    
          });
    
        </script>
    
    <?php
    }
    add_action( 'admin_footer', 'wpmu_admin_inline_js' );

    You can implement the above code via mu-plugins, please check this article for more info:
    https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Lastly, I urge you to consider alt text as a priority. Institutional customers will no longer be able to work with you if your products cannot meet accessibility standards, alt text for images being one of the most basic.

    I do understand you. I have already brought this into our developer's attention so that they could look further regarding this.

    Please do let us know how that code goes. Have a nice day ahead. :slight_smile:

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.