• Hi,
    Thanks for this great plugin !

    For accessibility reasons (a11y) I wish we could use

      and

    • tags around the list of buttons, instead of simple divs.
      Would it be possible?

      E.g.:

      Instead of:

      <div class="scriptlesssocialsharing__buttons">
        <a class="button" ...><span class="sss-name">Facebook</span></a>
        <a class="button" ...><span class="sss-name">Twitter</span></a>
        <a class="button" ...><span class="sss-name">Linkedin</span></a>
      </div>

      Get:

      <ul class="scriptlesssocialsharing__buttons">
        <li><a class="button" ...><span class="sss-name">Facebook</span></a></li>
        <li><a class="button" ...><span class="sss-name">Twitter</span></a></li>
        <li><a class="button" ...><span class="sss-name">Linkedin</span></a></li>
      </ul>

      Thanks !

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    If you are able to replace one file in your copy of the plugin, you can do this, as I’ve added a filter to make it possible. It’s the /includes/output/class-scriptlesssocialsharing-output-buttons.php file, and the addition of that filter is the only change made.

    Then you would just need to implement that filter and another one in order to get the markup you want. Here’s the new one, which allows you to change the div to a ul:

    
    add_filter( 'scriptlesssocialsharing_buttons_container_element', 'prefix_scriptless_change_buttons_container_element' );
    /**
     * Change the buttons container element from a div to a ul.
     *
     * @param string $div
     * @return string
     */
    function prefix_scriptless_change_buttons_container_element( $div ) {
    	return 'ul';
    }
    

    And this filter has been part of the plugin for a while, and will allow you to wrap each sharing link in a list element:

    
    add_filter( 'scriptlesssocialsharing_link_markup', 'prefix_scriptless_change_link_markup' );
    /**
     * Wrap each Scriptless Social Sharing link in a list item element.
     *
     * @param string $link
     * @return string
     */
    function prefix_scriptless_change_link_markup( $link ) {
    	return '<li>' . $link . '</li>';
    }
    

    I’ve tested these locally and they’re working for me, but please practice safe coding and make sure your files are backed up. I will note that the styling will also likely need to be updated, at least a bit, depending on your settings. Hope this helps you get started.

    Thread Starter yaaax

    (@yaaax)

    Hi Robin,

    Thank you so much for the quick answer!
    For the

    • it works perfectly.
      But I have an issue with the

      I have tested by replacing manually one file of your plugin :
      class-scriptlesssocialsharing-output-buttons.php

      It looks like it doesn’t work for me as I’m using a shortcode.

      The div string comes from the “inner_before” of that piece of code :

      private function get_defaults() {
      	$setting = $this->get_setting();
      
      	return array(
      		'before'       => '<div class="scriptlesssocialsharing">',
      		'after'        => '</div>',
      		'inner_before' => '<div class="' . $this->get_button_container_class( $setting ) . '">',
      		'inner_after'  => '</div>',
      		'heading'      => $setting['heading'],
      		'buttons'      => '',
      	);
      }

      in the file /includes/output/class-scriptlesssocialsharing-output-shortcode.php

    Plugin Author Robin Cornett

    (@littlerchicken)

    So, one way to modify that would be to manually update your shortcode to use the list you want, for example:

    
    [scriptless inner_before='<ul class="scriptlesssocialsharing__buttons">' inner_after='</ul>']
    

    But I have updated the repository shortcode class to use the same filter, so you should be able to replace that file and not make any further code changes.

    Thread Starter yaaax

    (@yaaax)

    Thanks it works perfectly ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Use and tags around the list of buttons (instead of a div)’ is closed to new replies.