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

[ENG-3009][ENG-3087][ENG-2977] Add aria-labels to sharing icons #456

Conversation

brianjgeiger
Copy link
Contributor

@brianjgeiger brianjgeiger commented Aug 17, 2021

Purpose

Fixes an accessibility problem on the ember preprints discover page (And also another on the preprints create/edit pages)

Summary of Changes/Side Effects

  1. Add aria-labels to sharing icons
  2. Add translation strings for sharing icon aria labels
  3. Update changelog and package.json
  4. Increase contrast on License Picker (required) labels for https://openscience.atlassian.net/browse/ENG-2977

Screen Shot 2021-09-01 at 11 00 44 AM

  1. Make dev mode banner an accessible red
  2. Add aria label to discover page search input box
  3. Add ember-component-attributes to dependencies

Testing Notes

This will be tested alongside the ember-osf-preprints PR that this will be linked to.

Ticket

https://openscience.atlassian.net/browse/ENG-3009
https://openscience.atlassian.net/browse/ENG-3087
https://openscience.atlassian.net/browse/ENG-2977

Reviewer Checklist

  • meets requirements
  • easy to understand
  • DRY
  • testable and includes test(s)
  • changes described in CHANGELOG.md

{{input
(html-attributes aria-label='Search')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has to be a bare string rather than a translated one due to limitations on ember-component-attributes. Though I suspect this will be merged into ember-osf-web before we get to translating preprints to a new language.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bit curious why this didn't work

Suggested change
(html-attributes aria-label='Search')
(html-attributes aria-label=(t 'eosf.components.search'))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brianjgeiger brianjgeiger changed the title [ENG-3009] Add aria-labels to sharing icons [ENG-3009][ENG-3087] Add aria-labels to sharing icons Sep 21, 2021
@brianjgeiger brianjgeiger changed the title [ENG-3009][ENG-3087] Add aria-labels to sharing icons [ENG-3009][ENG-3087][ENG-2977] Add aria-labels to sharing icons Sep 21, 2021
Copy link
Member

@fabmiz fabmiz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! some minor suggestions

{{input
(html-attributes aria-label='Search')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bit curious why this didn't work

Suggested change
(html-attributes aria-label='Search')
(html-attributes aria-label=(t 'eosf.components.search'))

addon/components/sharing-icons/template.hbs Outdated Show resolved Hide resolved
addon/components/sharing-icons/template.hbs Outdated Show resolved Hide resolved
addon/components/sharing-icons/template.hbs Outdated Show resolved Hide resolved
Co-authored-by: Fabrice Mizero <fabrice@cos.io>
Copy link
Member

@fabmiz fabmiz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brianjgeiger brianjgeiger merged commit cd95c07 into CenterForOpenScience:develop Oct 5, 2021
fabmiz pushed a commit to CenterForOpenScience/ember-osf-preprints that referenced this pull request Oct 5, 2021
## Purpose
Fix some more accessibility problems on the preprint detail page


## Summary of Changes/Side Effects
<!-- What did you change?
Include before/after screenshots or a video/gif if applicable.
Do these changes have any unforseen effects (good or bad)?-->


## Testing Notes
1. Update version of ember-osf to fix sharing icons not having aria-labels
2. Remove redundant `id='view-page'`
3. Add expand/collapse aria label to mfr expand/collapse control

## Notes for Reviewer
This will need to be yarn updated and ci run after CenterForOpenScience/ember-osf#456 is deployed. Also, this does not fix the MFR iframe issue, which looks to be an MFR problem.
brianjgeiger added a commit to CenterForOpenScience/ember-osf-preprints that referenced this pull request Oct 7, 2021
## Purpose
Fixes the accessibility problems related to contrast on the Preprints submit/edit page. Some of these changes (`(required)` red in the license picker items) are in CenterForOpenScience/ember-osf#456 but this PR isn't pinned to that, as another preprints PR is already pinned.

## Summary of Changes/Side Effects
1. Darker black for the preprint header preview `<i>` tag
2. Darker red for `(required)` and error messages
3. Darker placeholder text

## Testing Notes
Should just need to make sure that above items are passing a11y guidelines.

## Ticket

https://openscience.atlassian.net/browse/ENG-2977
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

Successfully merging this pull request may close these issues.

2 participants