Show more

Notes for developers

Custom CTA text and accessible description

The CTAs on the show more component are customisable if required. To do so, add the required text in data-expand and data-contract tags at the same level as the main data-module tag.

A data-description tag must be used where a descriptive link is required, for example where there is very little text or an object/image/chart/table or list begins the content so there is nothing to interpret the purpose of the link. Description data is combined with the text link and presented as an aria-label.

Custom character limits

Character limits for mobile, tablet and desktop are by default set at 50 characters, 150 characters and 200 characters respectively. These limits can be customised for each breakpoint up to a hard stop limit of 75, 175 and 225 characters respectively.

To do so, add a data-limits tag at the same level as the main data-module tag with comma separated values for mobile, tablet and desktop accordingly. If you wish to change the character count for one breakpoint only, set the breakpoints you do not wish to change to auto.

As an example, to change mobile to 60 characters, tablet to 170 characters and desktop to 220 characters, add data-limits="60,170,220"; to change mobile to 60 characters but leave tablet and desktop as per the defaults, add data-limits="60,auto,auto".

Inline variant

To retain the existing pattern from the removed Form row help component, a variant which includes the show more link on the final line of the intro text is available. (The show less button fits the standard pattern by appearing on a new line below the fully expanded content, as previously.) Be aware that using the standard version is recommended where possible, so this variant should only be used if strictly required.

To use this variant, add the m-show-more--inline to the element holding the main data-module tag.

Do not truncate variant

In certain circumstances, there may be a requirement to for the first section of text to remain intact and not be truncated. In this instance, add a data-truncate tag at the same level as the main data-module tag, setting it either to "none" to prevent truncation at all breakpoints, or to a true/false value for mobile, tablet and desktop accordingly.

As examples, to allow truncation at mobile and tablet but prevent it at desktop, add data-truncate="true,true,false", or to prevent truncation at all breakpoints, add data-truncate="none".

Aria usage for errors and help text

To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.

All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby. This ensures that the help text is read out immediately on focus of the form input/fieldset. When there is more that one item that requires referencing within the aria-describedby attribute the id values must be supplied in the form of a space separated list. For example if there is an error with id of 'err1' and help text with id of 'help1' the value for the aria-describedby attribute would be 'err1 help1'.

All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.

All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true" set on them, ensuring that when a user focus' on an errored form field, the field will be announced as invalid, so the user is then aware that there in an issue that requires fixing.

When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.

• Single form field - All attributes should be applied directly to that form field
• Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
• Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)

There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.

Controling show more programatically

Show more components can now be controlled programatically to open/close their content, as well as update their settings. The following methods are available for use:

Setting options

Required options must be set when initilising the component.

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-show-more' ], function ( mShowMoreModule ) {
		var mShowMoreEl = document.querySelector( '#showmoreId' ),
			mShowMoreInstance = mShowMoreModule.initInstance( mShowMoreEl );		mShowMoreInstance.setSettings({
			expand : 'Reveal more',
			contact : 'Reveal less',
			limits : '30,75,150',
		}});
	});
});

Changing locale settings

If no custom text is set, the default values, set in the locale settings, will be displayed. The locale settings will need to be updated to include appropriate translations for the 'read more', 'read less', 'about' and 'description' links and text.

en: {
	mShowMore : {
		expand : 'Show more',
		contract : 'Show less',
		about : ' about ', // Note spaces before and after
		description : 'this topic', // Lower case, as will follow on from the above (if not overwritten)
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

---

Notes for testers

• Help text should appear before the form field while error messages appear below.
• When JavaScript is available, the first part of the help text will be visible, with the complete text sliding into view via a 'read more' link.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

Tabbing to a show more CTA should make the input clearly visually different so that the focus point on the page is obvious to the user.

SPACE OR ENTER

With focus on an help icon, pressing ENTER will toggle the visibility of the associated help text. (On some older browsers, this functionality may be replicated using the SPACE bar instead of the ENTER button.)