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.