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.

Sign up for GitHub

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

Jump to bottom

Review button and link styles and states for accessibility #189

Closed
jhung opened this issue Jan 23, 2020 · 4 comments · Fixed by #229
Closed

Review button and link styles and states for accessibility #189

jhung opened this issue Jan 23, 2020 · 4 comments · Fixed by #229
Assignees
@jhung @greatislander @dayotte @cherylhjli
Labels
bug Something isn't working needs-design This feature depends on designs
Milestone
1.0.0-alpha.12

Comments

@jhung
Copy link
Contributor

jhung commented Jan 23, 2020 •
edited
Loading

Describe the bug
There are some buttons and link styles and states that are inconsistent and may pose accessibility issues. For example, some links visually appear as buttons, but are actually links. Some links and buttons have an outline when focused, while some change background colour.

These inconsistencies can create a barrier to understandability and predictability.

Expected behavior
Consistent visual language for focus, hover, current, visited, and active states.
Clear communication of intent of interactive elements that does not rely on colour alone.
Hover, focus, current, visited, and active states have sufficient colour contrast to adjacent colours.

Related to #188
@jhung jhung added bug Something isn't working needs-design This feature depends on designs labels Jan 23, 2020
@greatislander greatislander added this to the 1.0.0-beta.1 milestone Jan 23, 2020
@cherylhjli
Copy link

@jhung could you be a bit more specific about which ones are inconsistent?
Perhaps this states table could help point out the inconsistencies:
https://xd.adobe.com/view/c23a06b5-530d-4823-6e76-b968b88ad95c-b40b/screen/dbec8c7d-5e20-48c7-b7f2-c6366bbec4de/03-States-Table/

@cherylhjli
Copy link

As per our discussion today, changes to address this include:

@cherylhjli
Copy link

Also related to this:

  • Changing "browse all resources" on the home page from a button to a link.
    See the core screens v02 file for changes.

This was referenced Jan 28, 2020
Closed
Closed
Closed
Closed
@cherylhjli
Copy link

Also related: decided on this for the resource detail page:

Screen Shot 2020-01-30 at 2 10 30 PM

@greatislander greatislander mentioned this issue Feb 3, 2020
Merged
27 tasks
greatislander pushed a commit that referenced this issue Feb 10, 2020
@jhung
feat: refactor buttons and links using custom properties (#229)
245c866 
- Resolves #188.
- Resolves #189.
- Resolves #201.
- Resolves #202.
- Resolves #204.
- Resolves #208.
- Resolves #219.
- Resolves #221.
- Resolves #222.
- Resolves #223.
- Resolves #231.

Co-authored-by: jhung <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jhung jhung

@greatislander greatislander

@dayotte dayotte

@cherylhjli cherylhjli

Labels
bug Something isn't working needs-design This feature depends on designs
Projects
None yet
Milestone
1.0.0-alpha.12
Development

Successfully merging a pull request may close this issue.

feat: refactor buttons and links using custom properties platform-coop-toolkit/pinecone
4 participants
@jhung @greatislander @dayotte @cherylhjli