Fix: Add optional content visual indicator (fix #259)

[joe-replin]

Fix

• Fixes Completion calculations can return NaN when page content is optional #259
• Fixed division by zero errors in completionCalculations.js when page contains only optional content - now returns 0 instead of NaN
• Fixed division by zero in PageLevelProgressIndicatorView.js when components have no children

New

• Added visual "Optional" label below progress indicators when isOptional is true.
• Added "Optional." prefix to aria-label for screen reader announcements
• Implemented conditional wrapper rendering when label exists.

Testing

1. Set "_isOptional": true on page content (manually or via diagnostic extension)
2. Navigate to menu and verify:
3. Progress indicator shows "Optional" label below the progress bar
4. Empty progress bar displays correctly (0% instead of appearing full due to NaN)
5. Navigate within the optional page and check the navigation bar progress indicator
6. Test with screen reader - verify it announces "Optional" before progress information
7. Test non-optional content - verify no extra wrapper elements or labels appear
8. Inspect DOM - confirm pagelevelprogress__indicator-group only exists when content is optional

[cahirodoherty-learningpool]

👀

[kirsty-hames]

Hey @joe-replin, nice additional to the PLP thank you. All works as expected except for 6 , Test with screen reader - verify it announces "Optional" before progress information. Page progress (nav bar) reads as expected but the component doesn't.

When the progress indicators are enabled on components but optional, no label is read. The PLP indicator by default is set to aria-hidden and instead the completion status is handled in core by appending complete/incomplete to the heading instead. However, completion is only appended if _isOptional is false. To avoid introducing a label that is only available to sighted users do we need to update core _isOptional condition to include an "optional" label?

Optional : "optional" label is hidden. No state label appended to heading.

Mandatory : State label "incomplete" appended to heading.

[swashbuck]

To avoid introducing a label that is only available to sighted users do we need to update core _isOptional condition to include an "optional" label?

@kirsty-hames I am proposing to add required/optional (a.k.a. priority) labels here. This would allow you to show priority labels globally for different types like menu items, articles, components, etc.

Thoughts on this approach? I imagine we would want to remove the "optional" label here from the PLP (just at the component/block/article level) if we did that.

[joe-replin]

@swashbuck, I'll update this PR to remove the optional label from menu items (conflicts with the core PR). This would leave the optional label in the PLP only. And I will adjust to opt to use the new labeling feature in core.

[swashbuck]

Apologies, I misread Kirsty's comment and thought the optional label already appeared in the component-level PLP. My comment was not about the nav button PLP. The new core PR adds option/required labels above titles for different types.

[kirsty-hames]

@swashbuck, I'll update this PR to remove the optional label from menu items (conflicts with the core PR). This would leave the optional label in the PLP only. And I will adjust to opt to use the new labeling feature in core.

Just to clarify, this is how it looks with both PRs currently (this PR + new labeling feature in core PR):

As you've suggested @joe-replin, I think amending this PR to add the option label to the PLP nav button only makes sense to avoid duplication. Also the core PR optional label isn't dependant on a component title which makes this more flexible.

[joe-replin]

@kirsty-hames, @swashbuck, @cahirodoherty-learningpool - Given the new Core PR, I'm not sure if placing a label in the PLP button is a need anymore. If this is being shown at the top of a page as well as on top of a menu item, is another label in the PLP a real user need?

Even then, it gets complex because I need to script this in a way that says, "Remove the label from all PLP indicators besides the PLP Nav Button." And I'm thinking PLP has no parent models to latch onto like the others. Other reasons:

• Core will already be adding priority labels to all models anyway.
• Adding a label to the PLP button would already overcrowd any other label we place there.
• I'm struggling to think how I can add this in a clean way. It feels like a clunky solution now.

[kirsty-hames]

If this is being shown at the top of a page as well as on top of a menu item, is another label in the PLP a real user need?

Other reasons:

• Core will already be adding priority labels to all models anyway.
• Adding a label to the PLP button would already overcrowd any other label we place there.
• I'm struggling to think how I can add this in a clean way. It feels like a clunky solution now.

Agreed. I think the core PR now makes any labelling added via this PR redundant.