Consider this scenario…

  • Resolved Karis

    (@askel45)


    5 years, 11 months ago

    …where someone uses the CSS you provided to someone in this forum to show vertically aligned social share buttons. If I set the top and bottom share and then set the vertical ones to show at a minimum width (let’s say 1200px), a new problem arises related to accessibility. When using the Keyboard Tab key, when it arrives at the bottom where the bottom share buttons should be, it is blank and one has to press tab key several times depending on the number of social icons selected before moving to other content. But when tabbing at the top, it does detect the social share buttons (the one’s now aligned vertically). Is there a way to overcome this? (And also, you might consider adding some CSS for :focus). NB: This issue only happens for vertically aligned buttons when the top and bottom is selected, or when manual placement is also top and bottom (e.g. via a hook).

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

    (@littlerchicken)

    5 years, 11 months ago

    If you can share a URL with the affected CSS, I can look it over for you and see what might be going on. But just moving the bottom share buttons visually would probably result in the behavior you are experiencing, because the buttons still technically come after the content. One way to change that would be to use a different hook to place the vertical buttons, so they don’t come immediately after the content.

    You are correct that a style should be added for :focus … thanks for bringing it to my attention! I’ll see what I can do to remedy that.

    Thread Starter Karis

    (@askel45)

    5 years, 11 months ago

    Here is the CSS I am referring to. Just try to put the top and bottom icons then add the CSS and then try to tab through the content. You will see what I mean. Regarding the hook, I tried to hook the shortcode three times (I use a starter theme which I created do_action hooks for my custom plugin. Mind you, I am not a developer, I just learnt some code to help me manage my site). Then I assigned one parent class to the top and bottom icons and a different one to the vertical ones. I set each version not to display at a certain width with media query (max-width 1200 for top and bottom and min-width 1201 for the vertical). The problem arises that when I hide the top and bottom icons, they also disappear for the vertical ones. I am assuming this is due to the icons sharing the same CSS in both instances. If you have a workaround, let me know. (For focus styling, I just adapted the buttons to use my CSS for buttons sitewide (I prefer colour #666)).

    Plugin Author Robin Cornett

    (@littlerchicken)

    5 years, 11 months ago

    If you are creating a custom parent class for each set of buttons, that’s a solid idea and should help accomplish what you want. As long as the classes are unique, you should be able to use them to style each set of buttons differently. If you can share a link, I can offer more specific help based on what is on your site.

    Yes, the buttons will be part of the flow of tabbing through the site, wherever they are in the source code. If you do not want them immediately after the content, then you will need to use a filter or action hook to move it “physically” in the page output, as the CSS will only move it visually.

    Thread Starter Karis

    (@askel45)

    5 years, 8 months ago

    I finally figured it out with some CSS. And it even fixes properly inside the post-content container.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Consider this scenario…’ is closed to new replies.