- Taxonomic name: M-SOCIAL-BAR
- Extension: LONG-FORM-ARTICLE
- Current owner: Framework
- Added on: v5.2.0 (17/11/20)
- Updated on: v5.4.0 (23/02/21)
Social sharing bar
The purpose of the Social Sharing Bar component is to allow the sharing of the article via a number of social platforms or by email.
Design and usage
Structure
- Component is made up of a heading and list of social links
Accessibility and screen readers
- Text contrast inline with pre-existing WCAG guidelines and established Framework components
- Link heights a minimum of 44px in-line with pre-existing WCAG guidelines and established Framework components
- Hover and focus states inline with pre-existing WCAG guidelines and established Framework components
- Hidden descriptive text must be descriptive of what the link is doing eg. "Share this article on Twitter".
Placement
- Within the introduction / foreword (chapter 0) article chapter, after the article overview paragraph
Use case and exception scenarios
- Designed exclusively for the long-form article template page
Design anatomy
- All social icons follow the Framework social icon styles
Examples
Interactive example
Code example
<div class="m-social-bar">
<h3 class="m-social-bar__heading">Share</h3>
<ul class="a-social-links a-list-plain">
<li><a class="a-social-links__icon [ Modifer ]" href="..." itemprop="sameAs" title="External site - ..."><span>...</span></a></li>
...
</ul>
</div>Development and test
Notes for developers
This component uses social link, please refer to their documentation for specific details for this part of the component.
Ensure that the hidden text for each social sharing link is descriptive as to what the link will be doing/where the link will be taking the user eg. "Share this article on Twitter".
Extension component
This component forms part of the 'long-form-article' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/long-form-article.css" rel="stylesheet" />Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-social-bar |
Styling for the social sharing bar | Yes | div |
|
.m-social-bar__heading |
Styling for the social sharing bar heading | Yes | .m-social-bar > h3 |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant social page.
Component releases
- Added on: v5.2.0 (17/11/20)
- Updated on: v5.4.0 (23/02/21)
Latest update:
- updated: Guidance regarding social sharing links has been updated to recommend containing more descriptive text eg. "Share this article on Twitter" instead of simply "Twitter" in order to make it clearer to users of assistive technologies what the link will do.