search

uPortal-Project / uPortal-web-components

A collection of uPortal Web Components and JavaScript utilities
https://uportal-project.github.io/uPortal-web-components
Apache License 2.0
24 stars 25 forks source link

[esco-content-grid] Focus indicators on Google Chrome #431

Open jonathanmtran opened 5 years ago

jonathanmtran commented 5 years ago

Is your feature request related to a problem? Please describe. With the following, our accessibility team noted that there are no focus indicators on the favorite button and on the categories dropdown.

<esco-content-grid
  portlet-card-size="gridPortletCardSize"
  portlet-api-url="/uPortal/api/v4-3/dlm/portletRegistry.json?category=Online Services"
  hide-action="false"
>
  <div slot="header-left"></div>
</esco-content-grid>

We're currently suppressing the filtering functionality, but we'd like to have this functionality available for users to filter the portlet definitions.

Describe the solution you'd like I'd like to see the appropriate CSS added such that there are focus indicators on the favorite button and on the categories dropdown.

jgribonvald commented 5 years ago

The filter part is a "difficult" element (due to his way of UI representation, natural html elements ) and I'm not surprised that doesn't match all the accessibility requirements. After if it's only the focus indicator that is missing maybe it could be fixed with some js/css inside ? have someone some ideas ?

Maybe the good html tag that we should use would be an input with a datalist, but I don't know if browsers bug are fixed as when I developed it it was not working well inside web-components for firefox (and more with IE 11), after I wasn't able to customize it easily with css on all browser, chrome didn't accepted css on.