Fixes space name being read twice on the space selector screen (#27906) (#27991)

* fixes space name being read twice on the space selector screen

* fix comment

* fix type checks

x-pack/plugins/spaces/public/components/__snapshots__/space_avatar.test.tsx.snap

@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`removes aria-label when instructed not to announce the space name 1`] = `
+<Component
+  announceSpaceName={false}
+  space={
+    Object {
+      "id": "",
+      "name": "",
+    }
+  }
+>
+  <EuiAvatar
+    aria-label=""
+    color="#BFA180"
+    data-test-subj="space-avatar-"
+    initials=""
+    initialsLength={2}
+    name=""
+    size="m"
+    type="space"
+  >
+    <div
+      aria-label=""
+      className="euiAvatar euiAvatar--m euiAvatar--space"
+      data-test-subj="space-avatar-"
+      style={
+        Object {
+          "backgroundColor": "#BFA180",
+          "backgroundImage": "none",
+          "color": "#000000",
+        }
+      }
+      title=""
+    />
+  </EuiAvatar>
+</Component>
+`;
+
 exports[`renders with a space name entirely made of whitespace 1`] = `
 <EuiAvatar
   color="#DB1374"

x-pack/plugins/spaces/public/components/space_avatar.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { SpaceAvatar } from './space_avatar';
 
@@ -17,3 +17,8 @@ test('renders with a space name entirely made of whitespace', () => {
   const wrapper = shallow(<SpaceAvatar space={{ name: '      ', id: '' }} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+test('removes aria-label when instructed not to announce the space name', () => {
+  const wrapper = mount(<SpaceAvatar space={{ name: '', id: '' }} announceSpaceName={false} />);
+  expect(wrapper).toMatchSnapshot();
+});

x-pack/plugins/spaces/public/components/space_avatar.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiAvatar } from '@elastic/eui';
-import React from 'react';
+import React, { SFC } from 'react';
 import { getSpaceColor, getSpaceInitials, MAX_SPACE_INITIALS } from '../../common';
 import { Space } from '../../common/model/space';
 
@@ -13,10 +13,11 @@ interface Props {
   space: Partial<Space>;
   size?: 's' | 'm' | 'l' | 'xl';
   className?: string;
+  announceSpaceName?: boolean;
 }
 
-export const SpaceAvatar = (props: Props) => {
+export const SpaceAvatar: SFC<Props> = (props: Props) => {
-  const { space, size, ...rest } = props;
+  const { space, size, announceSpaceName, ...rest } = props;
 
   const spaceName = space.name ? space.name.trim() : '';
 
@@ -25,6 +26,10 @@ export const SpaceAvatar = (props: Props) => {
       type="space"
       data-test-subj={`space-avatar-${space.id}`}
       name={spaceName}
+      {...!announceSpaceName && {
+        // provide empty aria-label so EUI doesn't try to provide its own
+        'aria-label': '',
+      }}
       size={size || 'm'}
       initialsLength={MAX_SPACE_INITIALS}
       initials={getSpaceInitials(space)}
@@ -33,3 +38,7 @@ export const SpaceAvatar = (props: Props) => {
     />
   );
 };
+
+SpaceAvatar.defaultProps = {
+  announceSpaceName: true,
+};

x-pack/plugins/spaces/public/views/components/space_card.tsx

@@ -3,7 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-// @ts-nocheck
 
 import {
   // FIXME: need updated typedefs
@@ -34,7 +33,9 @@ export const SpaceCard = (props: Props) => {
 };
 
 function renderSpaceAvatar(space: Space) {
-  return <SpaceAvatar space={space} size={'l'} />;
+  // not announcing space name here because the title of the EuiCard that the SpaceAvatar lives in is already
+  // announcing it. See https://github.com/elastic/kibana/issues/27748
+  return <SpaceAvatar space={space} size={'l'} announceSpaceName={false} />;
 }
 
 function renderSpaceDescription(space: Space) {

x-pack/plugins/spaces/public/views/management/components/advanced_settings_title/__snapshots__/advanced_settings_title.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`AdvancedSettingsTitle renders as expected 1`] = `
     grow={false}
   >
     <Component
+      announceSpaceName={true}
       space={
         Object {
           "id": "my-space",

x-pack/plugins/spaces/public/views/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap

@@ -141,6 +141,7 @@ exports[`SpacesGridPage renders as expected 1`] = `
 exports[`SpacesGridPage renders the list of spaces 1`] = `
 Array [
   <Component
+    announceSpaceName={true}
     size="s"
     space={
       Object {
@@ -181,6 +182,7 @@ Array [
     </EuiAvatar>
   </Component>,
   <Component
+    announceSpaceName={true}
     size="s"
     space={
       Object {
@@ -220,6 +222,7 @@ Array [
     </EuiAvatar>
   </Component>,
   <Component
+    announceSpaceName={true}
     size="s"
     space={
       Object {

x-pack/plugins/spaces/public/views/nav_control/__snapshots__/nav_control_popover.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
     <SpacesGlobalNavButton
       linkIcon={
         <Unknown
+          announceSpaceName={true}
           className="spaceNavGraphic"
           size="s"
           space={