Augment keyboard accessibility of AppSidebar

[Pytal]

To Do

• Close button
• Figure
• Star
• Edit title

[Pytal]

@raimund-schluessler any idea on resolving the failing tests?

[raimund-schluessler]

The visual regression tests fail, because the appearance of the AppSidebar changed. You need to download the snapshot artifacts from the cypress run, replace the snapshots in cypress/snapshots/base with the actual ones from the cypress run, check that you like the snapshots, i.e. your changes lead to the desired result, commit the new snapshots and see the tests pass.

However, there seems to be an issue with the tertiary_actions now, see the "Editable title after click with custom tertiary action" example in the docs, where the checkbox is squished now, because the tertiary__actions style is not applied anymore:

[raimund-schluessler]

@Pytal could you please remove the PNG files that where not there before (the one with the numbers in the file name)?

[raimund-schluessler]

@Pytal The color or opacity of the star is off, which looks weird if it is overlayed with the folder icon, see e.g.

and https://github.com/nextcloud/nextcloud-vue/pull/2715/files#diff-b888e1950c55db271730b2350fbe7aa975167f52b84930ee515b0f86387d81ee for the before/after comparison

Also, the height of the header now changes when you start the edit mode, making all content jump:

This was not the case before:

[Pytal]

• Regarding title and subtitle positioning and spacing: That should be fixed as it’s a regression – both are too far down and too far apart, ideally should be same as before as that was ideal in relation to the filetype icon.

The title may either be editable or not so to prevent layout shifts due to the 44px Button component when editing the minimum height for the title must be 44px, I'll see about tweaking the positioning

• On the favoriting: This would probably be for a follow up pull request, but the actual accessibility fix would be what we did in the Mail app:

Will be done here for now and the new component may be added separately

[Pytal]

The star and star outline icons without color look like

Before	After

Without the color the star would blend in with the image it overlays if they are similarly colored, @jancborchardt @nimishavijay design suggestions?

[Pytal]

@jancborchardt how should we keep the star visible with the new grayscale filled and outlined star icons seen in the screenshots above?

[Pytal]

Proceeding as per @jancborchardt's decision in https://cloud.nextcloud.com/call/gqff69i8 to use a background for the star icons

Before	After