Adding Accessibility Features to Clarity's Site

Accessibility features enable users with disabilities to navigate, understand, and interact with digital experiences. Clarity’s development team wants to create a JavaScript-based accessibility menu for their website that provides user-friendly options for font size adjustment and grayscale filtering. They want to host their code outside of Liferay DXP so that any updates and maintenance do not interfere with the core platform.

In this exercise, you'll create and implement an accessibility menu on Clarity’s website using a global JS client extension.

Here, you'll create and deploy an accessibility menu using a global JS client extension.

Open a file explorer and navigate to the client-extensions/clarity-theme/ folder in your course workspace.
Open the client-extension.yaml file.
Add this code snippet at the bottom of the assemble block:
```
- from: build/static
  into: static
```
For example,
```
assemble:
    - from: build/buildTheme/img
      into: static/img
    - from: assets
      into: static
    - from: build/static
      into: static
clarity-theme:
[...]
```
This includes path properties for the assemble block in a client-extension.yaml file. The block specifies which resources the client extension should package during the build process and their output location.

The order of the properties within the assemble block does not affect the configuration. However, ensure that the indentation matches the rest of the content.

Insert a new line after the clarity-theme-favicon-light definition block and add this code snippet:

clarity-global-js:
    name: Clarity Global JS
    type: globalJS
    url: global.*.js

For example,

[...]
clarity-theme-favicon-light:
    name: Clarity Theme Favicon Light
    type: themeFavicon
    url: clarity-favicon-light.svg
clarity-global-js:
    name: Clarity Global JS
    type: globalJS
    url: global.*.js

This file contains the client extension definition block, specifying its name, type, and source URL for the build process.

Save the file.
From the module-2/exercise-2/assets/ folder, move the global.js file into the client-extensions/clarity-theme/assets/ folder.
Move the webpack.config.js file from the exercise-2/ folder to client-extensions/clarity-theme/.
From the client-extensions/clarity-theme/ folder, open the package.json file and delete its existent content.

Add this code snippet to the file:

{
	"devDependencies": {
		"webpack": "5.90.1",
		"webpack-cli": "5.1.4"
	},
	"dependencies": {
	},
	"liferayDesignPack": {
		"baseTheme": "styled"
	},
	"main": "package.json",
	"name": "@liferay/clarity-theme",
	"private": true,
	"scripts": {
		"build": "webpack"
	},
	"version": "0.1.0"
}

Great! Now that you've fully configured the global JS client extension, deploy it to your Liferay instance.

Open a terminal and navigate to the client-extensions/clarity-theme/ folder in your course workspace.
Run this command to build and deploy the client extension:
```
blade gw clean deploy
```

Verify it deploys successfully.

2025-01-24 14:08:34.676 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED claritytheme_7.4.13 [1463]

Now that you've included the global JS client extension in clarity-theme and redeployed it, you can add the accessibility menu to Clarity’s website.

Here, you'll apply the global JS client extension to Clarity’s home page.

In your running Liferay instance, sign in as the Clarity Admin user.
- Username: admin@clarityvisionsolutions.com
- Password: learn
Click Edit () to start editing the Home page.
Click Page Design Options () on the left menu.
Click More Page Design Options ().
On the Design tab, under the Customization section, click the JavaScript tab.
Click Add JavaScript Client Extensions and select In Page Head in the dropdown.
Select the Clarity Global JS checkbox and click Add.
Scroll to the bottom of the page and click Save.
Return to the Home page and publish it.
Click the A+ button in the top-right corner of the page to increase the font size.

Now you can control the page’s font size and apply a grayscale filter.

Conclusion

Great! You've learned how to create and deploy a global JS client extension to your Liferay instance and apply it to your pages. Next, you’ll learn about managing your site’s icons.