resolve page scroll when user selects last item

[chris-steele]

To resolve #231

[oliverfoster]

Could you try removing these instead please?

adapt-contrib-narrative/js/NarrativeView.js

Lines 273 to 274 in 268cf26

	$left.toggleClass('u-visibility-hidden', isAtStart);
	$right.toggleClass('u-visibility-hidden', isAtEnd);

It's probably because the focus is going from the button. Assigning it elsewhere usually causes the screen reader to read the a11y-focuser element. It was admittedly pretty bad practise for me to include that element / suggest that technique in the first place.

[oliverfoster]

See suggestion

[guywillis]

Both solutions resolve the page jump.

The suggestion from Ollie displays the previous button on the first slide and the next button on the last slide. Whilst selecting these buttons causes no errors within the build it is potentially confusing from a UI perspective and almost certainly confusing from a screen reader perspective - the buttons can be tabbed into and are read out.

Tested with NVDA.

[oliverfoster]

Both solutions resolve the page jump.

The suggestion from Ollie displays the previous button on the first slide and the next button on the last slide. Whilst selecting these buttons causes no errors within the build it is potentially confusing from a UI perspective and almost certainly confusing from a screen reader perspective - the buttons can be tabbed into and are read out.

Tested with NVDA.

They should be read out as disabled.

[oliverfoster]

@guywillis Let us know about the nvda disabled buttons when you get a chance pls

[guywillis]

NVDA does not read the buttons as disabled.

When testing, I have only removed these two lines as mentioned above:

adapt-contrib-narrative/js/NarrativeView.js

Lines 273 to 274 in 268cf26

	$left.toggleClass('u-visibility-hidden', isAtStart);
	$right.toggleClass('u-visibility-hidden', isAtEnd);

Screenshot of the narrative controls in the DOM for the first item of three.

[oliverfoster]

@chris-steele can you replace

adapt-contrib-narrative/js/NarrativeView.js

Lines 273 to 274 in 268cf26

	$left.toggleClass('u-visibility-hidden', isAtStart);
	$right.toggleClass('u-visibility-hidden', isAtEnd);

with

    a11y.toggleEnabled($left, !isAtStart);
    a11y.toggleEnabled($right, !isAtEnd);

instead?

[guywillis]

Works a charm.

Tested with NVDA

[chris-steele]

Done and thanks both

[cahirodoherty-learningpool]

👀

[github-actions]

🎉 This PR is included in version 7.2.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀