@gitlab/ui 33.1.2 → 34.0.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [34.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.1.2...v34.0.0) (2022-01-28)
+
+
+### Features
+
+* **GlAvatarsInline:** Add badgeSrOnlyText prop ([bcb0d29](https://gitlab.com/gitlab-org/gitlab-ui/commit/bcb0d299e9468e13cc7d565784388e3b9585e4a0))
+
+
+### BREAKING CHANGES
+
+* **GlAvatarsInline:** This change adds a required
+property named badgeSrOnlyText that ensures
+that badge displayed when avatars inline is
+collapsed, provides a screen reader only
+label that gives contextual information
+for users that use this form factor
+
 ## [33.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.1.1...v33.1.2) (2022-01-27)
 
 

package/dist/components/base/avatars_inline/avatars_inline.documentation.js

@@ -1,4 +1,4 @@
-var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
+var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Badge description in screen readers\n\nThe `badgeSrOnlyText` property provides a meaningful description of the badge that appears\nwhen avatars are collapsed for screen reader users.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -30,6 +30,10 @@ var script = {
       required: false,
       default: false
     },
+    badgeSrOnlyText: {
+      type: String,
+      required: true
+    },
     badgeTooltipProp: {
       type: String,
       required: false,
@@ -100,7 +104,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-avatars-inline', { collapsed: _vm.collapsed }],style:(_vm.containerSizeStyles)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(index))},[_vm._t("avatar",[_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))],{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(_vm.visibleAvatars.length))},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize]},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")])],1):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-avatars-inline', { collapsed: _vm.collapsed }],style:(_vm.containerSizeStyles)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(index))},[_vm._t("avatar",[_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))],{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(_vm.visibleAvatars.length))},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "33.1.2",
+  "version": "34.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,15 +91,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.14",
-    "@storybook/addon-docs": "6.4.14",
-    "@storybook/addon-essentials": "6.4.14",
+    "@storybook/addon-a11y": "6.4.15",
+    "@storybook/addon-docs": "6.4.15",
+    "@storybook/addon-essentials": "6.4.15",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.14",
-    "@storybook/addon-storyshots-puppeteer": "6.4.14",
-    "@storybook/addon-viewport": "6.4.14",
-    "@storybook/theming": "6.4.14",
-    "@storybook/vue": "6.4.14",
+    "@storybook/addon-storyshots": "6.4.15",
+    "@storybook/addon-storyshots-puppeteer": "6.4.15",
+    "@storybook/addon-viewport": "6.4.15",
+    "@storybook/theming": "6.4.15",
+    "@storybook/vue": "6.4.15",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/avatars_inline/avatars_inline.md

@@ -28,6 +28,11 @@ When the `collapse` property value is `true` and the `maxVisible` property value
 than the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars
 and display a badge instead.
 
+### Badge description in screen readers
+
+The `badgeSrOnlyText` property provides a meaningful description of the badge that appears
+when avatars are collapsed for screen reader users.
+
 ### Supported sizes
 
 `<avatars-inline>` only supports avatars with `24` or `32` size.

package/src/components/base/avatars_inline/avatars_inline.spec.js

@@ -11,10 +11,14 @@ describe('avatars inline', () => {
     { src: 'avatar 2', tooltip: 'Avatar 2' },
     { src: 'avatar 3', tooltip: 'Avatar 3' },
   ];
+  const badgeSrOnlyText = 'additional users';
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(AvatarsInline, {
-      propsData,
+      propsData: {
+        badgeSrOnlyText,
+        ...propsData,
+      },
       stubs: {
         GlTooltip,
       },
@@ -107,4 +111,20 @@ describe('avatars inline', () => {
       });
     });
   });
+
+  describe('a11y', () => {
+    it('renders screen reader only text for the collapse badge', () => {
+      buildWrapper({ avatars, maxVisible: 1, collapsed: true, avatarSize: 32 });
+
+      expect(wrapper.find('[data-testid="badge-sr-only-text"]').text()).toBe(badgeSrOnlyText);
+    });
+
+    it('hides badge text for screen readers', () => {
+      buildWrapper({ avatars, maxVisible: 1, collapsed: true, avatarSize: 32 });
+
+      expect(
+        wrapper.find('[data-testid="collapsed-avatars-badge"]').attributes('aria-hidden')
+      ).toBe('true');
+    });
+  });
 });

package/src/components/base/avatars_inline/avatars_inline.stories.js

@@ -1,37 +1,49 @@
+import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '../../../../index';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
-  { src: 'https://picsum.photos/id/1005/32' },
-  { src: 'https://picsum.photos/id/1006/32' },
-  { src: 'https://picsum.photos/id/1009/32' },
-  { src: 'https://picsum.photos/id/1011/32' },
-  { src: 'https://picsum.photos/id/1012/32' },
+  { src: 'https://picsum.photos/id/1005/32', alt: 'Administrator’s user avatar' },
+  { src: 'https://picsum.photos/id/1006/32', alt: 'Ops Manager’s user avatar' },
+  { src: 'https://picsum.photos/id/1009/32', alt: 'Developer’s user avatar' },
+  { src: 'https://picsum.photos/id/1011/32', alt: 'Business Admin’s user avatar' },
+  { src: 'https://picsum.photos/id/1012/32', alt: 'Product designer’s user avatar' },
 ];
 
 const generateProps = (
   avatars = defaultAvatars,
-  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+  {
+    maxVisible = 2,
+    collapsed = true,
+    avatarSize = 24,
+    badgeTooltipProp = '',
+    badgeSrOnlyText = `${avatars.length - maxVisible} additional users`,
+  } = {}
 ) => ({
   maxVisible,
   collapsed,
   avatarSize,
   avatars,
+  badgeTooltipProp,
+  badgeSrOnlyText,
 });
 
 export const Default = (args, { argTypes }) => ({
+  components: { GlAvatarsInline },
   props: Object.keys(argTypes),
   template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible" :badgeTooltipProp="badgeTooltipProp" :badgeSrOnlyText="badgeSrOnlyText">
     </gl-avatars-inline>
     `,
 });
 Default.args = generateProps();
 
 export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  components: { GlAvatarsInline, GlAvatar, GlAvatarLink },
+  directives: { GlTooltip: GlTooltipDirective },
   props: Object.keys(argTypes),
   template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible" :badgeTooltipProp="badgeTooltipProp" :badgeSrOnlyText="badgeSrOnlyText">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
           <gl-avatar :src="avatar.src" :size="avatarSize" />
@@ -45,11 +57,13 @@ WithLinksAndTooltips.args = generateProps(
     ...avatar,
     href: '//gitlab.com',
     tooltip: `Avatar ${index}`,
-  }))
+  })),
+  { badgeTooltipProp: 'tooltip' }
 );
 
 export default {
   title: 'base/avatar/avatars-inline',
+  component: GlAvatarsInline,
   parameters: {
     knobs: { disable: true },
     docs: {

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -29,6 +29,10 @@ export default {
       required: false,
       default: false,
     },
+    badgeSrOnlyText: {
+      type: String,
+      required: true,
+    },
     badgeTooltipProp: {
       type: String,
       required: false,
@@ -111,9 +115,15 @@ export default {
       <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
         {{ badgeTooltipTitle }}
       </gl-tooltip>
-      <span ref="badge" :class="['gl-avatars-inline-badge', badgeSize]">
+      <span
+        ref="badge"
+        data-testid="collapsed-avatars-badge"
+        :class="['gl-avatars-inline-badge', badgeSize]"
+        aria-hidden="true"
+      >
         {{ badgeLabel }}
       </span>
+      <span data-testid="badge-sr-only-text" class="sr-only">{{ badgeSrOnlyText }}</span>
     </div>
   </div>
 </template>