fix: add scrollbar and separator roles as supporting values

README.md

@@ -1017,8 +1017,9 @@ It accepts `<input>`, `<select>` and `<textarea>` elements with the exception of
 matched only using [`toBeChecked`](#tobechecked) or
 [`toHaveFormValues`](#tohaveformvalues).
 
-It also accepts elements with roles `meter`, `progressbar`, `slider` or
-`spinbutton` and checks their `aria-valuenow` attribute (as a number).
+It also accepts elements with roles `meter`, `progressbar`, `scrollbar`,
+`separator`, `slider` or `spinbutton` and checks their `aria-valuenow` attribute
+(as a number).
 
 For all other form elements, the value is matched using the same algorithm as in
 [`toHaveFormValues`](#tohaveformvalues) does.

src/__tests__/to-have-value.js

@@ -217,4 +217,20 @@ Received:
     // Role that does not support aria-valuenow
     expect(queryByTestId('textbox')).not.toHaveValue(70)
   })
+
+  test.each([
+    'meter',
+    'progressbar',
+    'scrollbar',
+    'separator',
+    'slider',
+    'spinbutton',
+  ])('handles value of aria-valuenow when role is %s', role => {
+    const valueToCheck = 120
+    const {queryByTestId} = render(
+      `<div role="${role}" aria-valuenow="${valueToCheck}" tabindex="0" data-testid="element"></div>`,
+    )
+
+    expect(queryByTestId('element')).toHaveValue(valueToCheck)
+  })
 })

src/utils.js

@@ -196,7 +196,14 @@ function getInputValue(inputElement) {
   }
 }
 
-const rolesSupportingValues = ['meter', 'progressbar', 'slider', 'spinbutton']
+const rolesSupportingValues = [
+  'meter',
+  'progressbar',
+  'scrollbar',
+  'separator',
+  'slider',
+  'spinbutton',
+]
 function getAccessibleValue(element) {
   if (!rolesSupportingValues.includes(element.getAttribute('role'))) {
     return undefined