Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jonathanmtran opened this issue Sep 11, 2019 · 1 comment
Open

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

jonathanmtran opened this issue Sep 11, 2019 · 1 comment

Comments

@jonathanmtran
Copy link

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants