Donate Block: Accessibility improvements

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR makes accessibility improvements to the Frequency layout version of the Donate block, specifically to make sure the tabs have the correct markup and attributes, and can be navigated in a predictable way via keyboard.

The tabs have been added on top of the existing radio button logic that the block used, to try to minimize the changes being made.

See 1200550061930446-as-1203715106299306 and 1200024937525366-as-1202002498910398

How to test the changes in this Pull Request:

1. Apply this PR and run npm run build.
2. Add a donate block to the editor, and switch it to the 'Frequency' Layout.
3. In the editor, try clicking the different tabs, and confirm that the active tab and panel updates.
4. In the editor, try switching the 'default' tab to one that's neither the original default nor the currently selected one, and confirm that the correct tab becomes selected. Repeat step 3 to confirm the other tabs still change on click.
5. Enable Configure Manually, and try disabling one tab; confirm that the preview works, and that setting the Default tab or clicking on the tabs still works. Re-enable the tab so all are visible.
6. Publish the block.
7. Repeat steps 3-5 on the front-end, and confirm that the block works as expected: the tabs and content update on click, and they display as expected.
8. Try changing the block styles to Alternate and Minimal, and confirm that things display as expected.

Default:

Alternate:

Minimal:

9. It would also be good to do a visual test of the Tiered Donate block to make sure nothing has changed -- the two blocks don't share the same markup, but they do share some of the same styles, so the changes made in this PR may affect that block.

These are the specific accessibility improvements that were added in this update:

• You can now use the "tab" key to navigate between different frequencies.
• The tabs have been replaced with buttons (which is required for them to to be "tabable" with the keyboard, and is semantically correct for their function). Each of these buttons has the attribute role="tab", and all three are wrapped in a parent element with the attribute role="tablist".
• Each tab and its associated panel has attributes that link them together -- each tab has a unique ID and an aria-controls attribute that has the ID of its associated panel, and each panel has an ID and an aria-labelledby attribute that has the ID of its associated tab.
• When a tab is selected, it will have the attribute aria-selected="true"; if not, it will have the attribute aria-selected="false"
• When a tab is selected, its associated panel should get the attribute tabindex="0".

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[adekbadek]

The styling of the tiers-based layout is broken – here's a before and after:

The interaction with this version of the block is broken, too:

The frequency-based version works as intended, though! Someday it'd be great to change the markup to remove the radio inputs entirely. This hacky markup was necessitated by AMP, which we don't support anymore. The block can have sane markup with JS-based interaction.

[laurelfulford]

Thanks so much @adekbadek! The code updates should all be done.

The styling of the tiers-based layout is broken – here's a before and after:

Gah, good catch! Part of this was definitely the CSS changes I added (the messed up looking tabs), and part of it was me not rebasing master and pulling in the fix for the multiple-selected issue -- both should be fixed! 🙂

[dkoo]

Looking good to me! The only bug I saw is a pretty rare edge case that's only in the editor (doesn't affect the front-end at all), so let's consider it non-blocking. To replicate:

1. Set default donation settings (in Reader Revenue > Donations) to tiered and allow all three tiers.
2. Set the block to Frequency layout and note the default tab, and leave that one active.
3. Turn on "Configure manually", then disable the frequency that was the default in step 2. Observe that the block gets put into a state with no active tab (after doing this you might have to toggle off/on "Configure manually" a couple of times to get it to happen):

This limbo state is easily fixed by clicking on a tab or saving and refreshing the browser, so it's a very minor issue.

[laurelfulford]

Thanks @dkoo!

I've spun up a separate issue to dig into that weird editor state -- that's a great catch!

I'm going to go ahead and merge this for now, and will address that in the next sprint!

[matticbot]

🎉 This PR is included in version 2.5.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 2.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀