Made the logviewer more accessible

[RachBreeze]

1. By adding the name of the log viewer to the title of the page
2. Changing most links with a click action to buttons
3. Adding aria-described by to help buttons be more informative to the screen reader user, where they have been styled visually.

Note that the "Save Search" isn't localised in the aria describe by, this replicates the popup which is also not localised.

[nul800sebastiaan]

@RachBreeze I assume the changes in umbeditorheader.directive.js were not meant for this PR, they seem unrelated?

[nul800sebastiaan]

Ah, don't mind me, I see what's happening. Is this something that will need to be added to new PRs as well to be able to update the title for anything else you might want to improve? I just want to make sure we don't have to repeat this code over and over again everywhere 😄

[nul800sebastiaan]

Alright, this seems to be working for the most part, but it will require some styling updates, switching to <button> elements has significantly changed the view which use to look something like

And now the second column has moved a lot further to the right, also the longer SourceContext message has a weird wrapping with an indentation on the second line that's not supposed to be there:

Can you please have a look at that @RachBreeze ?

[RachBreeze]

Ah, don't mind me, I see what's happening. Is this something that will need to be added to new PRs as well to be able to update the title for anything else you might want to improve? I just want to make sure we don't have to repeat this code over and over again everywhere 😄

There is still some work to do around titles in the back office, but it's getting fewer and fewer. I'm with you on not repeating code over and over. But every page should have a meaningful title, which is sometime hard for an app, https://www.w3.org/TR/WCAG21/#page-titled (2.4.2)

[RachBreeze]

Hi @nul800sebastiaan
Thank you for your feedback
I've updated the styling of the buttons on the properties table and fixed a spacing issue around the entry:
<div ng-if="log.Exception" class="exception">

The source context now wraps:

I've taken a look at the spacing issue and it appears on Umbraco Cloud 8.6.4 but it doesn't look to be this commit. The screenshot below shows the 8.6.4 site at the top and my localhost at the bottom.

Also the styling of the exception has remained unchanged:

[RachBreeze]

Further investigations needed following feedback from @poornimanayar , so hold this thought thank you

[RachBreeze]

Hello @nul800sebastiaan
I've updated this to use the latest v8/contrib branch

[nul800sebastiaan]

Thanks again @RachBreeze - this now looked mostly good!
Make sure to check my 2 additional commits:
fd32648
301f73f

Apparently an <a> always needs a href attribute. Make sure to not remove the rel attribute either unless you have a specific reason for that.

Additionally, always add type="button" to <button> elements otherwise they display the behavior of submitting any <form> on the page and lastly all <i> elements should get aria-hidden="true" since screen readers don't read these properly.

I've made these changes for you now so don't worry about that for this PR, all good, merging! 👍

Thanks again, top job!! 🏅