Skip to content

Commit

Permalink
Add/update aria attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
futa-ikeda committed Sep 28, 2023
1 parent 163b25c commit 50597a9
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 91 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
local-class='facet-wrapper'
...attributes
>
{{#let (unique-id @property.displayLabel) as |facetElementId|}}
{{#let (unique-id @property.propertyPathKey) as |facetElementId|}}
<Button
data-analytics-name='Filter facet toggle {{@property.displayLabel}}'
data-test-filter-facet-toggle={{@property.displayLabel}}
Expand Down
188 changes: 98 additions & 90 deletions lib/osf-components/addon/components/search-result-card/template.hbs
Original file line number Diff line number Diff line change
@@ -1,99 +1,107 @@
<div data-test-search-result-card local-class='result-card-container'>
<div local-class='primary-metadata-container'>
<div local-class='header'>
<div local-class='type-label'>
{{this.cardTypeLabel}}
{{#let (unique-id) as |secondaryMetadataPanelId|}}
<div local-class='primary-metadata-container'>
<div local-class='header'>
<div local-class='type-label'>
{{this.cardTypeLabel}}
</div>
{{#if (not-eq @result.resourceType 'user')}}
<Button
{{on 'click' this.toggleSecondaryMetadata}}
aria-label={{if this.isOpenSecondaryMetadata
(t 'osf-components.search-result-card.hide_additional_metadata')
(t 'osf-components.search-result-card.show_additional_metadata')
}}
aria-controls={{secondaryMetadataPanelId}}
aria-expanded={{this.isOpenSecondaryMetadata}}
>
{{#if this.isOpenSecondaryMetadata}}
<FaIcon
@icon={{'angle-up'}}
/>
{{else}}
<FaIcon
@icon={{'angle-down'}}
/>
{{/if}}
</Button>
{{/if}}
</div>
{{#if (not-eq @result.resourceType 'user')}}
<Button
{{on 'click' this.toggleSecondaryMetadata}}
>
{{#if this.isOpenSecondaryMetadata}}
<FaIcon
@icon={{'angle-up'}}
/>
{{else}}
<FaIcon
@icon={{'angle-down'}}
/>
{{/if}}
</Button>
<h4>
<a data-test-search-result-card-title href={{@result.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{@result.displayTitle}} </a>
{{#if @result.isWithdrawn}}
<span local-class='withdrawn-label'>{{t 'osf-components.search-result-card.withdrawn'}}</span>
{{/if}}
{{#if @result.orcids}}
{{#each @result.orcids as |item|}}
<a href={{item}}
target='_blank'
rel='noopener noreferrer'
aria-label={{t 'osf-components.search-result-card.link_to_orcid_id'}}
>
<FaIcon @prefix='fab' @icon='orcid' local-class='orcid-logo' />
</a>
{{/each}}
{{/if}}
</h4>

{{#if @result.affiliatedEntities}}
<div local-class='name-fields'>
<InlineList
@items={{@result.affiliatedEntities}}
@total={{@result.affiliatedEntities.count}}
@truncate={{5}}
as |list|
>
{{#if list.item}}
<a href={{list.item.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{list.item.name}} </a>
{{else if list.remainingCount}}
{{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}}
{{/if}}
</InlineList>
</div>
{{/if}}
</div>
<h4>
<a data-test-search-result-card-title href={{@result.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{@result.displayTitle}} </a>
{{#if @result.isWithdrawn}}
<span local-class='withdrawn-label'>{{t 'osf-components.search-result-card.withdrawn'}}</span>
{{#if @result.isPartOf}}
<div>
<span>{{t 'osf-components.search-result-card.from'}}: <a href={{@result.isPartOfTitleAndUrl.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{@result.isPartOfTitleAndUrl.title}} </a></span>
</div>
{{/if}}
{{#if @result.orcids}}
{{#each @result.orcids as |item|}}
<a href={{item}}
target='_blank'
rel='noopener noreferrer'
aria-label={{t 'osf-components.search-result-card.link_to_orcid_id'}}
>
<FaIcon @prefix='fab' @icon='orcid' local-class='orcid-logo' />
</a>
{{/each}}
{{#if @result.isContainedBy}}
<div>
<span>{{t 'osf-components.search-result-card.from'}}: <a href={{@result.isContainedByTitleAndUrl.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{@result.isContainedByTitleAndUrl.title}} </a></span>
</div>
{{/if}}
</h4>

{{#if @result.affiliatedEntities}}
<div local-class='name-fields'>
<InlineList
@items={{@result.affiliatedEntities}}
@total={{@result.affiliatedEntities.count}}
@truncate={{5}}
as |list|
>
{{#if list.item}}
<a href={{list.item.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{list.item.name}} </a>
{{else if list.remainingCount}}
{{t 'osf-components.search-result-card.remaining_count' count=list.remainingCount}}
<div local-class='date-fields'>
{{#each @result.dateFields as |field|}}
{{#if field.date}}
<span>{{field.label}}: {{field.date}}</span>
{{/if}}
</InlineList>
</div>
{{/if}}
{{#if @result.isPartOf}}
<div>
<span>{{t 'osf-components.search-result-card.from'}}: <a href={{@result.isPartOfTitleAndUrl.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{@result.isPartOfTitleAndUrl.title}} </a></span>
</div>
{{/if}}
{{#if @result.isContainedBy}}
<div>
<span>{{t 'osf-components.search-result-card.from'}}: <a href={{@result.isContainedByTitleAndUrl.absoluteUrl}} target='_blank' rel='noopener noreferrer'> {{@result.isContainedByTitleAndUrl.title}} </a></span>
{{/each}}
</div>
{{/if}}
<div local-class='date-fields'>
{{#each @result.dateFields as |field|}}
{{#if field.date}}
<span>{{field.label}}: {{field.date}}</span>
{{/if}}
{{/each}}
{{#if @result.context}}
<div local-class='context-field'>
<span>{{t 'osf-components.search-result-card.context'}}: {{@result.context}}</span>
</div>
{{/if}}
{{#if (or (eq @result.resourceType 'registration') (eq @result.resourceType 'registration_component'))}}
<div>
<OpenBadgesList
@hasData={{@result.hasDataResource}}
@hasMaterials={{@result.hasMaterialsResource}}
@hasAnalyticCode={{@result.hasAnalyticCodeResource}}
@hasPapers={{@result.hasPapersResource}}
@hasSupplements={{@result.hasSupplementalResource}}
@absoluteUrl={{@result.absoluteUrl}}
@verticalLayout={{false}}
/>
</div>
{{/if}}
</div>
{{#if @result.context}}
<div local-class='context-field'>
<span>{{t 'osf-components.search-result-card.context'}}: {{@result.context}}</span>
</div>
{{/if}}
{{#if (or (eq @result.resourceType 'registration') (eq @result.resourceType 'registration_component'))}}
<div>
<OpenBadgesList
@hasData={{@result.hasDataResource}}
@hasMaterials={{@result.hasMaterialsResource}}
@hasAnalyticCode={{@result.hasAnalyticCodeResource}}
@hasPapers={{@result.hasPapersResource}}
@hasSupplements={{@result.hasSupplementalResource}}
@absoluteUrl={{@result.absoluteUrl}}
@verticalLayout={{false}}
/>
</div>
{{/if}}
</div>
<CpPanel local-class='cp-panel' @open={{this.isOpenSecondaryMetadata}} as |panel|>
<panel.body>
<hr>
{{component this.secondaryMetadataComponent result=@result}}
</panel.body>
</CpPanel>
<CpPanel local-class='cp-panel' id={{secondaryMetadataPanelId}} @open={{this.isOpenSecondaryMetadata}} as |panel|>
<panel.body>
<hr>
{{component this.secondaryMetadataComponent result=@result}}
</panel.body>
</CpPanel>
{{/let}}
</div>
2 changes: 2 additions & 0 deletions translations/en-us.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1859,6 +1859,8 @@ routes:
email: Email
osf-components:
search-result-card:
show_additional_metadata: 'Show additional metadata'
hide_additional_metadata: 'Hide additional metadata'
language: Language
url: URL
resource_type: Resource type
Expand Down

0 comments on commit 50597a9

Please sign in to comment.