[WIP] fix(esco-content-menu): accessibility improvements

[jonathanmtran]

We've made various tweaks to the content grid to improve accessibility

• added an aria-live region to announce when a portlet is added/removed from favorites
• slightly restructured the element such that the favorite button isn't part of the a element
• removed a CSS rule that removed the outline on the favorite button as a focus indicator wouldn't be shown in chrome

supersedes PR #428
resolves issue #431
resolves issue #438

[jgribonvald]

@jonathanmtran your change on PortletCards about the href part are welcome but this will broke the content-favorites where this is used, so please try to repeat this change on the whole view of the component, ie the esco-hamburger-menu or at least the content-menu.

Also did you test the builded component from the demo page as example ?

[jonathanmtran]

I should have tagged this as work in progress as the changes were done in order for us to be allowed to deploy esco-content-grid to production, but yeah I imagined that the other components in the esco suite of components need to be looked at as well.

[jgribonvald]

@jonathanmtran could you refresh your WIP ? I have a chance to make a review on this work.
thanks

[jgribonvald]

Also for your development please test the deployment on an uPortal instance, some parts won't works like in the vue-cli-service serve (npm start).

Thanks

[jonathanmtran]

@jgribonvald My branch has been rebased against master

[jgribonvald]

Some change are required as it seems that some things are missing, also the change applied on content-grid + portletCard weren't applyed on favoritesContent. A change on this part is required if you want to change the href position around portletCard.

Also did you make a test on builded sources within an uPortal instance ?

[jgribonvald]

To add the sr-only class you need to import the css common part as after building the sr-only class isn't provided !
@import './../styles/common.scss'; should be added to style part

[jgribonvald]

I can't find any information change about the status, is it shown only after clicking on add/remove the favorite link ?

[jonathanmtran]

To add the sr-only class you need to import the css common part as after building the sr-only class isn't provided !
@import './../styles/common.scss'; should be added to style part

Will do. Thanks

I can't find any information change about the status, is it shown only after cliquing on add/remove the favorite link ?

It isn't shown at all. The goal of this change is to provide feedback to a user using a screen reader that a portlet has been favorited/unfavorited

[jgribonvald]

I can't find any information change about the status, is it shown only after cliquing on add/remove the favorite link ?

It isn't shown at all. The goal of this change is to provide feedback to a user using a screen reader that a portlet has been favorited/unfavorited

OK so for accessibility changing the icon and message to favorited from unfavorited state (and the reverse action) isn't enough !

[jgribonvald]

I feel like something is missing as I can't see change that pass a param for the translation.

[jgribonvald]

Also could you provide the same change on French files, and a French people will fix it if something is needed don't be worried !

[jonathanmtran]

I feel like something is missing as I can't see change that pass a param for the translation.

In favoriteMessage() in ActionFavorites.vue and in actionToggleFav() in ContentGrid.vue, I'm doing a string replacement to replace the {} placeholder with the name of the portlet. If there's a better way to accomplish this, please advise.

Also could you provide the same change on French files, and a French people will fix it if something is needed don't be worried !

I updated the French language files. Hope it's a good starting point

[jgribonvald]

Thanks 🥇

[jonathanmtran]

Also did you make a test on builded sources within an uPortal instance ?

Yes. I've tested the resulting Webjar against a clean copy of uPortal-start. As far as I'm aware, the admin tools tab/layout is using the <esco-content-grid>. Are there other places where this family of components is being used?

[jgribonvald]

Also did you make a test on builded sources within an uPortal instance ?

Yes. I've tested the resulting Webjar against a clean copy of uPortal-start. As far as I'm aware, the admin tools tab/layout is using the <esco-content-grid>. Are there other places where this family of components is being used?

Firstly you can test the whole part from the project in running npm start, but watch on the App.vue if the content-menu (at least) is activated (you can test with the hamburger-menu which is the complete component, uncomment it in this case).
Else for inside the portal you have this Pull Request to apply uPortal-Project/uPortal-start#239 (but the PR may need a refresh, let me know in this case)

[ChristianMurphy]

@jonathanmtran friendly ping, is this still in progress?

[jonathanmtran]

I haven't had the time to remediate the other components in this family of components, so I'll be closing this