[Bug][Docs][a11y]: move the ActionBar after the trigger button that opens it in examples

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

ActionBar

Expected behavior

<sp-actionbar> should follow the button that expands or collapses it. So that the <sp-actionbar> renders in a logical tab order rather than before the button, which forces the user to Shift+Tab or navigate backwards using a screen reader to find it.

<h4>Look down and to the left when toggling.</h4>
<sp-button
    onclick="javascript:this.nextElementSibling.open = !this.nextElementSibling.open; this.setAttribute('aria-expanded', this.nextElementSibling.open);"
    aria-expanded="false"
    aria-controls="fixed-variant-id"
>
    Toggle fixed action bar
</sp-button>
<sp-action-bar variant="fixed" id="fixed-variant-id" role="toolbar" aria-label="Actions">
    <sp-checkbox indeterminate>228 Selected</sp-checkbox>
</sp-action-bar>

Actual behavior

<sp-actionbar> comes before the button that expands or collapses it, which forces the user to Shift+Tab or navigate backwards using a screen reader to find it.

<h4>Look down and to the left when toggling.</h4>
<sp-action-bar variant="fixed">
    <sp-checkbox indeterminate>228 Selected</sp-checkbox>
</sp-action-bar>
<sp-button
    onclick="javascript:this.previousElementSibling.open = !this.previousElementSibling.open;">
    Toggle fixed action bar
</sp-button>

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[najikahalsema]

To do:

• Reverse the tab order as suggested above in the examples, and test it manually to make sure that the tab order makes sense.

[najikahalsema]

Would be good to explore the possibility of a stricter action bar API in the future that automatically handles this behaviour so that this behaviour isn't triggered by consumers using the component.

[blunteshwar]

in #2639 this issue #3257 had already been resolved and the corresponding pull request is also linked to this issue by @lunarfusion
I have also raised a PR #3457