Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move aria-labelledby into computed menu props #729

Merged
merged 1 commit into from
Aug 23, 2024
Merged

Move aria-labelledby into computed menu props #729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

- [Pull request #727: Add `aria-controls` to aria props](https://github.com/alphagov/accessible-autocomplete/pull/727)
owenatgov marked this conversation as resolved.
Show resolved Hide resolved
- [Pull request #724: Add accessibility controls to 'No results' list item](https://github.com/alphagov/accessible-autocomplete/pull/724)

- [Pull request #729: Move `aria-labelledby` into computed menu props](https://github.com/alphagov/accessible-autocomplete/pull/729)

## 3.0.0 - 2024-04-19

Expand Down
2 changes: 1 addition & 1 deletion dist/accessible-autocomplete.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/accessible-autocomplete.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/lib/accessible-autocomplete.preact.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/lib/accessible-autocomplete.preact.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/lib/accessible-autocomplete.react.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/lib/accessible-autocomplete.react.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

59 changes: 7 additions & 52 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,10 +470,7 @@ <h3>Translating texts</h3>
accessibleAutocomplete({
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -484,10 +481,7 @@ <h3>Translating texts</h3>
element: element,
id: id,
minLength: 2,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -498,10 +492,7 @@ <h3>Translating texts</h3>
autoselect: true,
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -512,10 +503,7 @@ <h3>Translating texts</h3>
displayMenu: 'overlay',
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -526,10 +514,7 @@ <h3>Translating texts</h3>
defaultValue: 'Germany',
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -540,9 +525,6 @@ <h3>Translating texts</h3>
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
},
autoselect: true,
inputClasses: 'app-input'
})
Expand All @@ -555,9 +537,6 @@ <h3>Translating texts</h3>
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
},
autoselect: true,
hintClasses: 'app-hint'
})
Expand All @@ -570,9 +549,6 @@ <h3>Translating texts</h3>
element: element,
id: id,
source: countries,
menuAttributes: {
"aria-labelledby": id
},
autoselect: true,
menuClasses: 'custom-menu-class'
})
Expand Down Expand Up @@ -617,9 +593,6 @@ <h3>Translating texts</h3>
element: element,
id: id,
source: customSuggest,
menuAttributes: {
"aria-labelledby": id
},
templates: {
inputValue: inputValueTemplate,
suggestion: suggestionTemplate
Expand All @@ -635,9 +608,6 @@ <h3>Translating texts</h3>
id: id,
confirmOnBlur: false,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
})
</script>

Expand All @@ -649,9 +619,6 @@ <h3>Translating texts</h3>
id: id,
placeholder: 'Search for a country',
source: countries,
menuAttributes: {
"aria-labelledby": id
}
})
</script>

Expand All @@ -662,10 +629,7 @@ <h3>Translating texts</h3>
element: element,
id: id,
showNoOptionsFound: false,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -676,10 +640,7 @@ <h3>Translating texts</h3>
element: element,
id: id,
showAllValues: true,
source: countries,
menuAttributes: {
"aria-labelledby": id
}
source: countries
})
</script>

Expand All @@ -690,9 +651,6 @@ <h3>Translating texts</h3>
element: element,
id: id,
showAllValues: false,
menuAttributes: {
"aria-labelledby": id
},
source: countries,
tStatusQueryTooShort: function (minQueryLength) {
return 'Tippe mindestens ' + minQueryLength + ' Zeichen ein für Resultate.'
Expand Down Expand Up @@ -725,9 +683,6 @@ <h3>Translating texts</h3>
id: id,
showAllValues: true,
source: countries,
menuAttributes: {
"aria-labelledby": id
},
dropdownArrow: function (config) {
return '<svg class="' + config.className + '" style="top: 8px;" viewBox="0 0 512 512" ><path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9 c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3 z"/></svg>'
}
Expand Down
2 changes: 2 additions & 0 deletions src/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,8 @@ export default class Autocomplete extends Component {
}

const computedMenuAttributes = {
// set aria-labelledby first so that users can override it with menuAttributes
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good shout adding a comment 😍

'aria-labelledby': id,
// Copy the attributes passed as props
...menuAttributes,
// And add the values computed for the autocomplete
Expand Down
26 changes: 21 additions & 5 deletions test/functional/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,15 +111,13 @@ describe('Autocomplete', () => {
})

describe('menuAttributes', () => {
it('renders with the extra attribute on the menu', () => {
render(<Autocomplete menuAttributes={{ 'aria-labelledby': 'autocomplete-default' }} id='autocomplete-default' />, scratch)
it('renders with extra attributes on the menu', () => {
render(<Autocomplete menuAttributes={{ 'data-test': 'test' }} id='autocomplete-default' />, scratch)

const wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
const dropdownElement = wrapperElement.getElementsByTagName('ul')[0]
const inputElement = wrapperElement.getElementsByTagName('input')[0]

expect(dropdownElement.getAttribute('aria-labelledby')).to.equal('autocomplete-default')
expect(inputElement.getAttribute('id')).to.equal('autocomplete-default')
expect(dropdownElement.getAttribute('data-test')).to.equal('test')
})

describe('attributes computed by the component', () => {
owenatgov marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -174,6 +172,24 @@ describe('Autocomplete', () => {
expect(menuAttributes.className).to.equal('custom-className')
expect(menuAttributes.class).to.equal('custom-class')
})

it('adds `aria-labelledby` by default, based on the ID', () => {
render(<Autocomplete id='autocomplete-default' />, scratch)

const wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
const dropdownElement = wrapperElement.getElementsByTagName('ul')[0]

expect(dropdownElement.getAttribute('aria-labelledby')).to.equal('autocomplete-default')
})

it('overrides `aria-labelledby` if passed in menuAttributes', () => {
render(<Autocomplete menuAttributes={{ 'aria-labelledby': 'test' }} id='autocomplete-default' />, scratch)

const wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
const dropdownElement = wrapperElement.getElementsByTagName('ul')[0]

expect(dropdownElement.getAttribute('aria-labelledby')).to.equal('test')
})
})

it('renders with extra class on the input', () => {
Expand Down