// @flow

import React from 'react';
import get from 'lodash/get';
import { translateWithObject } from '../i18n/translate';
import type { PlaceInfoRelated } from '../model/PlaceInfo';

type Props = {
  related: PlaceInfoRelated,
  sourceId: string,
  locale: string,
};

export default function ExtraInfo(props: Props) {
  const key = `sources.${props.sourceId}.translations.additionalAccessibilityInformation`;
  const translations = get(props.related, key);

  if (translations) {
    return (<header className="ac-result-extra-info">
      {translateWithObject(translations, props.locale)}
    </header>);
  }
  return null;
}


// @flow

import React from 'react';
import get from 'lodash/get';
import { translateWithObject } from '../i18n/translate';
import type { PlaceInfoRelated } from '../model/PlaceInfo';

type Props = {
  related: PlaceInfoRelated,
  sourceId: string,
  locale: string,
};

export default function ExtraInfo(props: Props) {
  const key = `sources.${props.sourceId}.translations.additionalAccessibilityInformation`;
  const translations = get(props.related, key);

  if (translations) {
    return (<header className="ac-result-extra-info" aria-hidden>
      {translateWithObject(translations, props.locale)}
    </header>);
  }
  return null;
}


Hide repetitive extra info from screen readers
Hide repetitive extra info from screen readers

There is a trade-off here:
- The information might be lost for people using screen readers
- As it has kind of a small-print character, the widget is more usable if the info not repeated for every list item a screen reader user switches to.
