New: Add classes and spans for prefixes / suffixes (fixes #233)

[swashbuck]

Fixes #233

New

• When scaleStepPrefix or scaleStepSuffix are set, has-scale-step-prefix and has-scale-step-suffix modifier classes are now added, giving theme authors a useful CSS hook.
• Prefix and suffix values are now wrapped in <span> elements in all three visible render locations: scale number labels, correct answer range indicator, and selected value indicator
• The span wrappers enable targeted styling like hiding on small screens via media queries (e.g. showing $5 on desktop but just 5 on mobile). This would need to be customized by the theme author, though.

Testing

1. Configure a slider with scaleStepPrefix (e.g. $) and/or scaleStepSuffix (e.g. days)
2. Verify the prefix/suffix text is wrapped in the expected span elements in the DOM
3. Verify has-scale-step-prefix / has-scale-step-suffix classes appear on slider__widget
4. Verify aria label strings are unaffected (prefix/suffix still render as plain text in screen reader spans)
5. Verify a slider with no prefix/suffix is unchanged — no extra spans or classes

Related

adaptlearning/adapt-contrib-vanilla#592 - Adds improved styling when prefixes and suffixes are present.

Posted via collaboration with Claude Code

[kirsty-hames]

Works as expected thanks with no impact on SR experience 👍