[POS Settings] Accessibility improvements

[iamgabrielma]

Closes WOOMOB-1221
Closes WOOMOB-1229
Closes WOOMOB-1230

Description

This PR adds general accessibility improvements to POS Settings by updating PointOfSaleSettingsView and its child views by:

• Usage of .dynamicTypeSize for Text
• Conditional rendering of icons in larger sizes
• Added traits like .isHeader and .isButton
• Updated the title of PointOfSaleModalHeader to not force .lineLimit(1) when using larger sizes
• Removed .plain style from buttons, which caused an issue with visual feedback when tapped.

Untitled-20250902.mov

Before	After

Testing information

• Load the app, navigate to POS > Settings
• Navigate and tap around with different font sizes, observe that all options are readable
• Observe that tapping in buttons that would open modals/webviews (ie: Hardware > Barcode Scanners > Scanner Setup shows visual feedback in the button when tapped.
• Enable voiceover on a physical device, or run the accessibility inspector in Xcode. Observe that the accessibility traits like header and button are voiced.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS Prototype
	Build Number	pr16068-d2959d1
	Version	23.1
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	d2959d1
	Installation URL	1u4m3t4h92nm8

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

[iamgabrielma]

One review is enough!

[joshheald]

Generally works well, thanks for the attention to detail.

I noticed a couple of things while testing:

POS modals don't block views underneath from VoiceOver

POS modals don't take over the accessibility context when presented here – I think they do when presented in the main view. You shouldn't be able to select views under the modal with VoiceOver, as it's confusing.

voiceover.behind.modals.mp4

This should be handled by POSModal already, so it's a bit strange: POSRootModalViewModifier has this code:

        content
                .blur(radius: modalManager.isPresented ? 8 : 0)
                .disabled(modalManager.isPresented)
                .accessibilityElement(children: modalManager.isPresented ? .ignore : .contain)

Perhaps it's something like .posRootModal() being set in a different part of the heirarchy than it is for the dashboard?

Store settings content can scroll under status bar

I've not checked why, but at larger sizes when you start being able to scroll the store details, they show up above the title, behind the status bar, which is a bit strange. Interestingly, it doesn't happen with Hardware. Perhaps it's a safe area issue?

store.info.scrolling.mp4

[joshheald]

This means the x button is announced as a heading as well. Not a huge problem but a bit odd. Perhaps it would be better to update the internals of the POSPageHeaderView to have this trait just on the text – it saves us adding it elsewhere.

[iamgabrielma]

Yes, let's update the POSPageHeaderView better, I've logged it on WOOMOB-1254 so can be tested separately

[iamgabrielma]

Thanks for the review Josh!

POS modals don't take over the accessibility context when presented here – I think they do when presented in the main view. You shouldn't be able to select views under the modal with VoiceOver, as it's confusing

Good catch, I logged this one as WOOMOB-1253

Store settings content can scroll under status bar

Thanks, this is fixed here #16070 👍