diff --git a/package.json b/package.json index b53f6f80..c14b13cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@smartcitiesdata/react-discovery-ui", - "version": "2.1.43", + "name": "@urbanos/react-discovery-ui", + "version": "2.1.44", "description": "React component for dataset discovery UI", "main": "./lib/ReactDiscoveryUI.js", "repository": { diff --git a/src/components/collapsable-box/collapsable-box.js b/src/components/collapsable-box/collapsable-box.js index aec0c860..45a3ba0a 100644 --- a/src/components/collapsable-box/collapsable-box.js +++ b/src/components/collapsable-box/collapsable-box.js @@ -4,6 +4,14 @@ import { Collapse } from 'react-collapse' import { Component } from 'react' import DetailToggleIcon from '../detail-toggle-icon' +function extractText(node) { + if (!node) return '' + if (typeof node === 'string' || typeof node === 'number') return String(node) + if (Array.isArray(node)) return node.map(extractText).join(' ').trim() + if (node.props && node.props.children) return extractText(node.props.children) + return '' +} + export default class extends Component { constructor(props) { super(props) @@ -29,7 +37,7 @@ export default class extends Component { onKeyDown={(event) => { if (event.key === ' ' || event.key === 'Enter') { event.preventDefault(); this.toggleCollapsed() } }} role='button' tabIndex='0' - aria-label={`${this.props.title} collapsable box`} + aria-label={[this.props.title, extractText(this.props.headerHtml)].filter(Boolean).join(': ') || 'collapsable box'} aria-pressed={this.state.expanded} >