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

fix(Avatar): improve accessibility #1213

Merged
merged 1 commit into from
Jan 25, 2022
Merged

fix(Avatar): improve accessibility #1213

merged 1 commit into from
Jan 25, 2022

Conversation

langz
Copy link
Contributor

@langz langz commented Jan 24, 2022

Adds label for screen readers to Avatar.Group, and uses the full string passed to Avatar as label for screen readers.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 24, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 36f716d:

Sandbox Source
eufemia-starter Configuration

@tujoworker tujoworker self-requested a review January 24, 2022 20:11
@gatsby-cloud
Copy link

gatsby-cloud bot commented Jan 24, 2022

Gatsby Cloud Build Report

DNB Eufemia Portal

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 7m

Performance

Lighthouse report

Metric Score
Performance 🔶 67
Accessibility 💚 100
Best Practices 💚 100
SEO 💚 92

🔗 View full report

Copy link
Member

@tujoworker tujoworker left a comment

Choose a reason for hiding this comment

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

Omg! So fast, beautiful 😍 and well done!

Copy link
Contributor

@thaytharma thaytharma left a comment

Choose a reason for hiding this comment

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

Looks good! Added a few suggested corrections 😊

@@ -11,6 +11,12 @@ import { ISpacingProps } from '../../shared/interfaces'
import { extendPropsWithContext } from '../../shared/component-helper'

export interface AvatarGroupProps {
/**
* Aria label to describe the tag group
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
* Aria label to describe the tag group
* Label to describe the avatar group

@@ -69,10 +120,32 @@ describe('Avatar', () => {
expect(image.getAttribute('height')).toBe(img_height)
})

it('warns when Tag is used without a Tag.Group as parent component', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
it('warns when Tag is used without a Tag.Group as parent component', () => {
it('warns when Avatar is used without a Avatar.Group as parent component', () => {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

😂 🙏

describe('AvatarGroup', () => {
it('renders the label', () => {
const label = 'tags'
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const label = 'tags'
const label = 'avatars'

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Danke danke

@langz
Copy link
Contributor Author

langz commented Jan 25, 2022

Looks good! Added a few suggested corrections 😊

You can say that it "gikk litt fort i svingene" 😂
And I had such great examples from your code in tags 🙏

@langz langz merged commit 3a456c5 into main Jan 25, 2022
@langz langz deleted the fix/avatar-a11y branch January 25, 2022 08:44
@thaytharma
Copy link
Contributor

Looks good! Added a few suggested corrections 😊

You can say that it "gikk litt fort i svingene" 😂 And I had such great examples from your code in tags 🙏

Hahah, kjenner meg igjen..
Great work anyways. 😂

tujoworker pushed a commit that referenced this pull request Jan 26, 2022
# [9.19.0](v9.18.0...v9.19.0) (2022-01-26)

### Bug Fixes

* add "unstyled" as a button variant ([8cb0712](8cb0712))
* added export of Bar in Pagination ([#1200](#1200)) ([f148786](f148786))
* **Avatar:** improve accessibility ([#1213](#1213)) ([3a456c5](3a456c5))
* **Breadcrumb:** forward props in BreadcrumbItem to span as well ([#1188](#1188)) ([17a1de0](17a1de0))
* **Breadcrumb:** improve accessibility ([#1189](#1189)) ([59825b8](59825b8))
* **build:** break build when step fails ([cb436d3](cb436d3))
* **CodeHighlighting:** ensure a scrollbar is shown when not enough space is available ([634df1b](634df1b))
* **DrawerList:** ensure DrawerList is unsetting its global attributes on unmount ([d64ccf8](d64ccf8))
* fix circular dependency issue for Timeline and Avatar ([439ccc3](439ccc3))
* fix rendering of DatePickerFooter when show_reset_button is provided ([#1197](#1197)) ([d7d4507](d7d4507))
* fix reset_button_text property of DatePicker ([#1196](#1196)) ([e50fb6f](e50fb6f))
* fixed global context bug that removed component props ([#1193](#1193)) ([82be98c](82be98c))
* **Tag:** fix circular dependency issue when bundling UMD modules with Rollup.js ([d155f7c](d155f7c))
* **Tag:** remove data-prop from TagGroup ([#1225](#1225)) ([72e4207](72e4207))
* **Tag:** remove tag group warnings in tests ([#1214](#1214)) ([16bd840](16bd840))
* **Tag:** update delete icon ([#1224](#1224)) ([fe5c766](fe5c766))

### Features

* add Avatar component ([#1191](#1191)) ([6a30523](6a30523))
* add AvatarGroup component ([#1195](#1195)) ([ae5ef7d](ae5ef7d))
* add InfoCard component ([5db0cbc](5db0cbc))
* add TagGroup component ([#1208](#1208)) ([781007d](781007d))
* add TimeLine component ([#1186](#1186)) ([255a14e](255a14e))
* remove type="module" in order omit the "fullySpecified" spec ([b424e08](b424e08))
* **Tag:** Add onClick prop ([db68b30](db68b30))
* **Tag:** add onDelete-prop ([#1217](#1217)) ([2f1642b](2f1642b))
@tujoworker
Copy link
Member

🎉 This PR is included in version 9.19.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Successfully merging this pull request may close these issues.

3 participants