fix(action-bar): actionBar after actionButton 3257

[blunteshwar]

Description

the action-bar was appearing before the action-button which opens it so I corrected this order by placing the action-bar after the action-button that opens it in example because 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.

Related issue(s)

Motivation and context

How has this been tested?

Using Dev Tools(see screenshot attached)

• Test case 1
  1. Go here
  2. Do this
• Test case 2
  1. Go here
  2. Do this

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions]

Branch Preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[github-actions]

Tachometer results

Chrome

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	369 kB	36.26ms - 37.28ms	-	unsure 🔍 -1% - +3% -0.32ms - +0.93ms
branch	370 kB	36.11ms - 36.82ms	unsure 🔍 -3% - +1% -0.93ms - +0.32ms	-

Firefox

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	369 kB	184.27ms - 218.09ms	-	unsure 🔍 -11% - +12% -20.92ms - +23.56ms
branch	370 kB	185.41ms - 214.31ms	unsure 🔍 -12% - +10% -23.56ms - +20.92ms	-

[Westbrook]

Closing as a duplicate of #2639 as there is a larger refactor of the element played out therein.

Of note, there are two instances of this addressed in that PR: https://github.com/adobe/spectrum-web-components/pull/2639/files#diff-760591fcd861f949acad051b0c05c85d2471d81b9c02757437e3ccc9f63f95f5