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

Bug 1873331: Adds alt-text to masthead icons #6497

Conversation

sg00dwin
Copy link
Member

@sg00dwin sg00dwin commented Sep 2, 2020

Added alt to svg icons.
Buttons have aria-label

Bug https://bugzilla.redhat.com/show_bug.cgi?id=1873331

@openshift-ci-robot openshift-ci-robot added the bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. label Sep 2, 2020
@openshift-ci-robot
Copy link
Contributor

@sg00dwin: This pull request references Bugzilla bug 1873331, which is invalid:

  • expected the bug to target the "4.6.0" release, but it targets "4.7.0" instead

Comment /bugzilla refresh to re-evaluate validity if changes to the Bugzilla bug are made, or edit the title of this pull request to link to a different bug.

In response to this:

Bug 1873331: Adds alt-text to masthead icons

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@openshift-ci-robot openshift-ci-robot added bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. component/core Related to console core functionality labels Sep 2, 2020
@sg00dwin
Copy link
Member Author

sg00dwin commented Sep 2, 2020

/bugzilla refresh

@openshift-ci-robot openshift-ci-robot added bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. and removed bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. labels Sep 2, 2020
@openshift-ci-robot
Copy link
Contributor

@sg00dwin: This pull request references Bugzilla bug 1873331, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug
  • bug is open, matching expected state (open)
  • bug target release (4.6.0) matches configured target release for branch (4.6.0)
  • bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

/bugzilla refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

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

I would leave "icon" off the end. I believe this should basically be the text we would display if we made these text buttons instead of using icons.

You should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

/cc @jessiehuff

@@ -564,7 +564,7 @@ class MastheadToolbarContents_ extends React.Component {
isRead
count={notificationAlerts?.data?.length || 0}
>
<BellIcon />
<BellIcon alt-text="Notification Bell icon" />
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<BellIcon alt-text="Notification Bell icon" />
<BellIcon alt-text="View Notifications" />

Copy link
Member Author

Choose a reason for hiding this comment

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

included alt-text="" based on comments below

frontend/public/components/masthead-toolbar.jsx Outdated Show resolved Hide resolved
frontend/public/components/masthead-toolbar.jsx Outdated Show resolved Hide resolved
@openshift-ci-robot
Copy link
Contributor

@spadgett: GitHub didn't allow me to request PR reviews from the following users: jessiehuff.

Note that only openshift members and repo collaborators can review this PR, and authors cannot review their own PRs.

In response to this:

I would leave "icon" off the end. I believe this should basically be the text we would display if we made these text buttons instead of using icons.

You should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

/cc @jessiehuff

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

Copy link
Contributor

@jessiehuff jessiehuff left a comment

Choose a reason for hiding this comment

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

@spadgett is correct, typically words like "image", "icon", etc. are left off in labeling. This WAI article talks about recommendations for labeling, the section discussing this kind of wording is under "Superfluous information in the text alternative". In terms of the user experience for screen readers, the alt text here actually won't be read to users as there's currently an aria-hidden on the svg which tells screen readers to ignore it. It looks like when creating our icons, if you don't include a title, it adds the aria-hidden to the svg. There are some options here, but I'm thinking that this falls under the category of functional images and perhaps we should consider making the alt="" since we already have the button aria-label. Scott O'Hara is a thought leader in the a11y space, and he does an excellent job of laying out the options in this article covering our use case. In Option 2 the button already has an aria-label, they just add the empty alt text to avoid redundancy and repetition. We could add a title to the icon which would make the svg not hidden anymore, but then we run the risk of some screen readers reading "Help menu Help menu."

@spadgett
Copy link
Member

spadgett commented Sep 3, 2020

+1 if there is already a button with an aria-label, we should use alt-text="" 👍

@spadgett
Copy link
Member

spadgett commented Sep 3, 2020

@jessiehuff Any idea why this wasn't caught by Axe? Is there a rule we need to enable?

cc @dtaylor113

@jessiehuff
Copy link
Contributor

Technically speaking, when there is an aria-hidden on an image or icon, a label isn't required since it's not accessible to a screen reader. Axe describes the alt rule here stating that an alt text shouldn't be empty unless hidden using CSS with display: none or aria-hidden="true". Many people recommend it though since having the empty alt is more like a fallback.

@sg00dwin sg00dwin force-pushed the masthead-accessibility-bug1873331 branch from 23f24b5 to d438116 Compare September 3, 2020 15:48
@jessiehuff
Copy link
Contributor

Hey @sg00dwin, I didn't catch it before and even wrote it incorrectly earlier myself, but I think it should be an alt attribute so alt=""

@sg00dwin sg00dwin force-pushed the masthead-accessibility-bug1873331 branch from d438116 to 47940b0 Compare September 3, 2020 17:08
@sg00dwin
Copy link
Member Author

sg00dwin commented Sep 3, 2020

Hey @sg00dwin, I didn't catch it before and even wrote it incorrectly earlier myself, but I think it should be an alt attribute so alt=""

Updated changes to use alt=""

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

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

/lgtm

@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: sg00dwin, spadgett

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci-robot openshift-ci-robot added lgtm Indicates that a PR is ready to be merged. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Sep 3, 2020
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

1 similar comment
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-merge-robot openshift-merge-robot merged commit 3a74594 into openshift:master Sep 4, 2020
@openshift-ci-robot
Copy link
Contributor

@sg00dwin: All pull requests linked via external trackers have merged:

Bugzilla bug 1873331 has been moved to the MODIFIED state.

In response to this:

Bug 1873331: Adds alt-text to masthead icons

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@sg00dwin sg00dwin deleted the masthead-accessibility-bug1873331 branch September 8, 2020 13:44
@openshift-ci-robot
Copy link
Contributor

@sg00dwin: Bugzilla bug 1873331 is in an unrecognized state (MODIFIED) and will not be moved to the MODIFIED state.

In response to this:

Bug 1873331: Adds alt-text to masthead icons

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. component/core Related to console core functionality lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants