In this post we create the Power Apps Component for the Fluent UI Menu Builder, the collection that is output from the menu builder will be used as our collection for our menu. Our objective is to create a menu component using SVG icons and text, to meet the WCAG 2.1 Level AA standard for accessibility.
Our Icon menu (Rail) on its own will not meet the standard we need to provide the text with the icon to meet Success Criterion 3.2.3 Consistent Navigation, Expanding navigation menus.
To meet Level AA Non Text Contrast The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s). In our example we will use colors with a contrast ration of at least 7.1:1 which meets the extended Level AAA for Success Criterion 1.4.6 Contrast (Enhanced).
Our two menu states will be as the following example and we will manipulate the container size to provide the expanded menu view.
Step 1 – Install the Fluent UI Menu Builder
Install the Fluent UI Menu Builder from :
Step 2 – Create a New Canvas App
Step 3 – Import Components from the Fluent UI Menu Builder solution.
This will import the following components:
- Accessibility Helpers
Step 4 – Add a container to the screen, name it con_MainMenu and add the PP-MainMenu component within the container
The Values for the Custom Properties should be as follows:
MenuItems: Collection created in the Menu Builder
LightColor: The background color of your theme (copy from the menu builder)
DarkColor: The Icon color of your theme (copy from the menu builder)
Step 5 – Create your menu items in the Menu Builder
The colours we are using:
Icon Color: #3D4550 RGBA(61,69,80,1) Background Colour: #E9E3FF RGBA(233,227,255,1)
These colours give us a contrast ratio of 7.8 well above the requirements for Level AA and Level AAA contrast requirements.
Select the icons for your menu, by clicking the Add to menu button, update the top inputs of the menu builder icons, and click update on each, then click on Create.
give the Collection a name and click on the check you will see the code update with the name.
When your happy click on Copy to copy the collection code to the local clipboard.
Step 6 – Add collection code to the App OnStart
In the App OnStart paste the code and the Run OnStart
Our menu should now look like:
Step 7 – Add Hamburger Icon in the container
In the App OnStart add the following to create our hideMenu variable:
In the Hamburger icon OnSelect setting add the following:
If( hideMenu = true, Set(hideMenu, false), Set(hideMenu, true) )
Select the container con_MainMenu in the width setting add the following:
Add the Menu Title in the Container and that’s it a menu well on the way to meet our required Level AA Accessibility Standards .
The component outputs the property varSelectedItem which is the MenuText field of the collection.