Fix/issue 1387 sidebar icons nvda

[timwright12]

Description

Fixes #1387

How has this been tested?

Linting and in-browser.

Types of changes

Added a span with aria-hidden="true" to prevent NVDA from over-announcing the sidebar component state.

Checklist:

• [ x ] My code is tested.
• [ x ] My code follows the WordPress code style.
• [ x ] My code follows the accessibility standards.
• [ x ] My code has proper inline documentation.

[afercia]

Thanks @timwright12! Actually, it's the opposite case: Firefox + NVDA don't announce aria-expanded because the browser repaints the whole element. Not sure we should patch it though, as next NVDA mitigates the issue.

[timwright12]

@afercia I updated the comment in case we end up wanting to merge this in. I do agree with your statement in #1387 that we probably shouldn't rely on alpha releases of software that may or may not be released by the 5.0 milestone. Especially when it's something so small and easy to patch like this.

So if we want to push this fix, it's here, if not we should close out all the open items related to it, so no one else jumps in - and certainly remove it from the 5.0 milestone list.

[tofumatt]

Coolio, looks good!

[tofumatt]

Hi @timwright12: just so you know the failing snapshots here are legitimate; in the future it's worth running npm run test-unit and npm run test-e2e when changing HTML or behaviour in the app 😄

In this case the HTML has changed so snapshots need updating. In this case I've just gone ahead and updated them with npm run test-unit:update, but in the future if you changed HTML and expect the snapshots to change, please run those if you see tests failing. 😄

[timwright12]

@tofumatt oh excellent, thanks for clearing that up. I was wondering about the tests!