Accessibility changes

[azdyrski]

Is your feature request related to a problem? Please describe.
Our accessibility specialist on our team has identified a number of issues that we have resolved our end through deploy-time substitution of modified content files (views, css, js) from the plumber package. This makes updating the package take longer than it should ideally due to a manual process of having to merge our changes back into the updated package content files.

Describe the solution you'd like
To get our changes (or some version of a change, they aren't perfect in a lot of cases) integrated into the Plumber 2 package so we can easily update to new versions without concerns of accessibility in the Back Office.

Licensed version?
Yes

Additional context
I am attaching (if github will let me) a zip archive that contains two folders, an "original" folder and a "modified" folder. The modified folder is our version (with accessibility changes) of the v1.6.3 content files, and the original is the same files in their unmodified 1.6.3 version. Hopefully this should make it somewhat easy to compare what we modified. It didn't paste 100% correctly, hopefully the nesting of the bullet points isn't too confusing.

plumber1.6.3-accessibility.zip

I am not sure the best way to get all these changes to you, but additionally below is the task description from our accessibility specialist that we made our content changes based off. The description based on an earlier 1.5.x beta version so some of it may not apply anymore.

Description:
"I tested on UAT a little quicker than what I usually test since I’m not sure that all of this will be used by anyone other than us. Becuase I tested on UAT items noted may already be fixed on dev. If you see anything big I missed related to workflow, please let me know.

Under Workflow section in the top nav:

• In the below screenshot, white text on green does not pass compliance. The rest pass.
  <screenshot of approved/pending/etc. dashboard>
• The bar graph on this page does not have any accessible text. It also says “If element is interactive with mouse, it’s not keyboard accessible because there is no focusable fallback content.” It looks like you can hover over each day with a mouse and get how many are pending. This is inaccessible because you can not get this information with a keyboard. Charts are a third-party plugin, likely outside the scope of anything I can update
• The Date range field does not have an accessible name/title/label.

Under Approval Groups:

• Loss of focus after search and before table.
• Name, Group members, Permissions, and Email group are focusable with keyboard but don’t have any actions associated with them, so do not need focus.
• The Approval Groups info looks like a table and should be one so the info can be associated with each other. This is Umbraco behaviour, and I agree should be an HTML table
• There is a checkbox in the far left corner of the table that only appears when I turn on ANDI. It doesn’t seem to do anything and I can’t trigger it without ANDI on. I think this needs to be removed.

When creating a group:

• Something strange is happening. There is a block of text over the “enable offline approval” section that says “Feature requires a license.” While I’m not able to use my mouse to activate the toggel, but I’m able to get to the toggle and change it with a keyboard. Either it needs to be active for both with an accessible name and the warning removed, or deactivated for both.
• Enter a name and Enter Alias placeholder text is too light, does not pass color compliance. The lock symbol should be adjusted as well. Umbraco behaviour
• The descriptions under Email and Description are too light and do not pass color compliance. Umbraco behaviour
• None of the fields have an associated name, label, or title. This include the name field at the top of the page, which also includes a section for an alias. We want to add the visible name as well, although the placeholder text does not disappear when focused on. The field at the top also needs the required asterisk and note. It seems like the alias is required as well? parts of this are Umbraco behaviour, have resolved others
• The accessible text for the lock next to Alias needs a little more description. Unlock what? Umbraco behaviour

Under History:

• When selecting Select Node, Search doe not have an accessible name/title/label.
• Focus also does not transfer into the flyout when the button is selected. It also does not return to where it originally was when the flyout is closed.
• Type, page, requested by, requested on, comment, and status are focusable with keyboard but don’t have any actions associated with them, so do not need focus. A few look like they may sort, but that is not functioning at the moment.
• Workflow History overview info looks like a table and should be one so the info can be associated with each other. Will need a TH for the “Details” Button column. Umbraco behaviour
• Per page does not have an accessible name/title/label. It also does not receive visible focus.
• Focus does not transfer into the flyout when Detail is selected. Focus does not return when flyout is closed.
• Date and time information in Details flyout does not pass color compliance. Umbraco behaviour
• When zooming in to 125%, “Pending Approval” under Status update, gets cut off inside the blue bubble and you can’t read it. This also happens to Cancelled at 150% zoom.

Under Documentation:

• The white text on the orange banner does not pass color compliance.
• Text disappears from “View Project on GitHub button” when focused with a keyboard.

Under Licensing:

• “Buy a License” appears to be inactive, but appears active when you hover over it with a mouse. I would make it inactive for both mouse and keyboard focus. The Validate button is doing similar on mouse focus when it should be inactive.
• When opening the “Read the EULA” flyout, after closing it, focus does not return to where you were but returns to Content at the very top of the page. Also, the heading for the flyout still says “Ugh. Boring.” I enjoyed it.
• License and Key fields have no accessible text.
• White text on green box “TRIAL” does not pass compliance.

Under Settings:

• None of the dropdowns, toggles, or text fields have accessible names.
• There is no visible focus on the dropdown fields.
• Same thing is happening with the “Feature requires a license” text boxes on this page. I can get to the add buttons with a keyboard, but not with a mouse. They either need to be accessible to all or no one.

Workflow Details in a Node:

• Reject button does not pass color compliance (white on orange).
• Date and time under Change Description do not pass color compliance. Umbraco behaviour
• I’m not sure Active Workflow does anything? It’s an active button but it doesn’t go anywhere?
• Both Active Workflow and History buttons have “collapsed” in their accessible text which isn’t necessary. As do Approve, Reject, Cancel. Umbraco behaviour, should be reviewed and improved in the umb-button component
• Comment box does not have an accessible name/title/label.
• Under History, that table should be an actual table. Label in top row do not need to be active or focusable. Will need TH text for above Detail.
• When selecting detail, focus does not move into the flyout and does not return to where it was when the flyout is closed.
• Pending approval disappears when page is zoomed.

When a page is not in a workflow:

• Content approval flow dropdown does not receive visible focus and does not have an associated name/title/label. Component is no longer a dropdown
• After adding a content approval flow, white text on bright green does not pass color compliance.
• Sort and X buttons have not associated name. Component has been update to text rather than icons
• Sort will need a keyboard accessible way to do it. Umbraco behaviour
• Edit Group is not accessible by keyboard.
• Initiate Workflow Box: Describe the changes text box has no accessible name/title/label.
• When typing in the box, the Initiate Workflow text turns white on green, which does not pass compliance.
• Set date is not accessible with a keyboard. Umbraco behaviour

Thanks for reading this very long request, the package has been great overall as well. It was exactly what we needed to build client confidence in having them updating their own content in the umbraco BO.

[nathanwoulfe]

Hi @azdyrski, this is super thorough. I'll need to have a look through the list and determine what is Plumber behaviour/implementation versus what is Umbraco-inherited.

I'd expect all (or most of) the text contrast issues to be related to the Umbraco styles, so not something I'd be open to modifying for Plumber since I need to rely on Umbraco UI as much as possible. Likewise with the task tables in history etc - that's the Umbraco UI pattern for building the table, so is out of scope for changes in Plumber.

I'll work through the list when I have time, and note here the changes which would need to be raised in the Umbraco-CMS repo.

Update the original issue to be a checklist, will help with keeping track of changes

[azdyrski]

Sounds good, thanks for your thorough response!

Your mention of the umbraco styles made me realize I should have mentioned that we do a similar replacement for the default umbraco BO styles, so some of the stuff in the description is definitely related to that like you said.

Thanks again, will keep an eye out for updates here/on the github.

[nathanwoulfe]

@azdyrski been a while, but have made pretty good progress on most of these - I've updated the task list and left some additional comments to highlight issues related to Umbraco default behaviour. These updates are all in the v2.1.0-rc.

[nathanwoulfe]

v2.1.0 resolved the majority of these issues. Will aim for the remaining issues in the next patch release