From 0427531fbc3baa15e32db81e795f5e1fc387548a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sun, 3 May 2020 17:35:29 +0200
Subject: [PATCH 1/2] feat(ByRole): Allow filter by selected state

---
 src/__tests__/ariaAttributes.js | 94 +++++++++++++++++++++++++++++++++
 src/queries/role.js             | 17 ++++++
 src/role-helpers.js             | 22 ++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 src/__tests__/ariaAttributes.js

diff --git a/src/__tests__/ariaAttributes.js b/src/__tests__/ariaAttributes.js
new file mode 100644
index 00000000..0d4bb538
--- /dev/null
+++ b/src/__tests__/ariaAttributes.js
@@ -0,0 +1,94 @@
+import {render} from './helpers/test-utils'
+
+test('`selected` throws on unsupported roles', () => {
+  const {getByRole} = render(`<input aria-selected="true" type="text">`)
+  expect(() =>
+    getByRole('textbox', {selected: true}),
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"\\"aria-selected\\" is not supported on role \\"textbox\\"."`,
+  )
+})
+
+test('`selected: true` matches `aria-selected="true"` on supported roles', () => {
+  const {getAllByRole} = render(`
+<select>
+  <option selected id="selected-native-option" />
+  <option id="unselected-native-option" />
+</select>
+<div role="listbox">
+  <div role="option" aria-selected="true" id="selected-listbox-option" />
+  <div role="option" aria-selected="false" id="unselected-listbox-option" />
+  <div role="option" id="not-selectable-listbox-option" />
+</div>
+<div role="tree">
+  <div role="treeitem" aria-selected="true" id="selected-treeitem" />
+  <div role="treeitem" aria-selected="false" id="unselected-treeitem" />
+  <div role="treeitem" id="not-selectable-treeitem" />
+</div>
+<input type="radio" aria-selected="true" id="selected-native-radio" />
+<input type="radio" aria-selected="false" id="unselected-native-radio" />
+<div role="radio" aria-selected="true" id="selected-radio" />
+<div role="radio" aria-selected="false" id="unselected-radio" />
+<table>
+  <thead>
+    <tr>
+      <th scope="col" aria-selected="true" id="selected-native-columnheader" />
+      <div role="columnheader" aria-selected="true" id="selected-columnheader" />
+      <th scope="col" id="unselected-native-columnheader" />
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row" aria-selected="true" id="selected-native-rowheader" />
+      <td />
+      <td />
+    </tr>
+    <tr>
+      <div role="rowheader" aria-selected="true" id="selected-rowheader" />
+      <td />
+      <td />
+    </tr>
+  </tbody>
+</table>
+<div role="grid">
+  <div role="gridcell" aria-selected="true" id="selected-gridcell" />
+  <div role="gridcell" aria-selected="false" id="unselected-gridcell" />
+  <div role="gridcell" id="not-selectable-gridcell" />
+</div>
+<div role="tablist">
+  <div role="tab" aria-selected="true" id="selected-tab" />
+  <div role="tab" aria-selected="false" id= "unselected-tab" />
+  <div role="tab" id="unselectable-tab" />
+</div>
+`)
+
+  expect(
+    getAllByRole('columnheader', {selected: true}).map(({id}) => id),
+  ).toEqual(['selected-native-columnheader', 'selected-columnheader'])
+
+  expect(getAllByRole('gridcell', {selected: true}).map(({id}) => id)).toEqual([
+    'selected-gridcell',
+  ])
+
+  expect(getAllByRole('option', {selected: true}).map(({id}) => id)).toEqual([
+    'selected-native-option',
+    'selected-listbox-option',
+  ])
+
+  expect(getAllByRole('radio', {selected: true}).map(({id}) => id)).toEqual([
+    'selected-native-radio',
+    'selected-radio',
+  ])
+
+  expect(
+    getAllByRole('rowheader', {selected: true}).map(({id}) => id),
+  ).toEqual(['selected-rowheader', 'selected-native-rowheader'])
+
+  expect(getAllByRole('treeitem', {selected: true}).map(({id}) => id)).toEqual([
+    'selected-treeitem',
+  ])
+
+  expect(getAllByRole('tab', {selected: true}).map(({id}) => id)).toEqual([
+    'selected-tab',
+  ])
+})
diff --git a/src/queries/role.js b/src/queries/role.js
index a442bfd9..6cae446d 100644
--- a/src/queries/role.js
+++ b/src/queries/role.js
@@ -1,5 +1,7 @@
 import {computeAccessibleName} from 'dom-accessibility-api'
+import {roles as allRoles} from 'aria-query'
 import {
+  computeAriaSelected,
   getImplicitAriaRoles,
   prettyRoles,
   isInaccessible,
@@ -24,11 +26,19 @@ function queryAllByRole(
     trim,
     normalizer,
     queryFallbacks = false,
+    selected,
   } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
 
+  if (selected !== undefined) {
+    // guard against unknown roles
+    if (allRoles.get(role)?.props['aria-selected'] === undefined) {
+      throw new Error(`"aria-selected" is not supported on role "${role}".`)
+    }
+  }
+
   const subtreeIsInaccessibleCache = new WeakMap()
   function cachedIsSubtreeInaccessible(element) {
     if (!subtreeIsInaccessibleCache.has(element)) {
@@ -65,6 +75,13 @@ function queryAllByRole(
         matcher(implicitRole, node, role, matchNormalizer),
       )
     })
+    .filter(element => {
+      if (selected !== undefined) {
+        return selected === computeAriaSelected(element)
+      }
+      // don't care if aria attributes are unspecified
+      return true
+    })
     .filter(element => {
       return hidden === false
         ? isInaccessible(element, {
diff --git a/src/role-helpers.js b/src/role-helpers.js
index eee0010a..e7627b29 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -168,6 +168,27 @@ function prettyRoles(dom, {hidden}) {
 const logRoles = (dom, {hidden = false} = {}) =>
   console.log(prettyRoles(dom, {hidden}))
 
+/**
+ * @param {Element} element -
+ * @returns {boolean | undefined} - false/true if (not)selected, undefined if not selectable
+ */
+function computeAriaSelected(element) {
+  // implicit value from html-aam mappings: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
+  // https://www.w3.org/TR/html-aam-1.0/#details-id-97
+  if (element.tagName === 'OPTION') {
+    return element.selected
+  }
+  // explicit value
+  const attributeValue = element.getAttribute('aria-selected')
+  if (attributeValue === 'true') {
+    return true
+  }
+  if (attributeValue === 'false') {
+    return false
+  }
+  return undefined
+}
+
 export {
   getRoles,
   logRoles,
@@ -175,4 +196,5 @@ export {
   isSubtreeInaccessible,
   prettyRoles,
   isInaccessible,
+  computeAriaSelected,
 }

From 0bad768a581c9934efbbb078c25aea1141222139 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 5 May 2020 15:40:38 +0200
Subject: [PATCH 2/2] Remove test for aria 1.1

---
 src/__tests__/ariaAttributes.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/__tests__/ariaAttributes.js b/src/__tests__/ariaAttributes.js
index 0d4bb538..56590aac 100644
--- a/src/__tests__/ariaAttributes.js
+++ b/src/__tests__/ariaAttributes.js
@@ -25,10 +25,6 @@ test('`selected: true` matches `aria-selected="true"` on supported roles', () =>
   <div role="treeitem" aria-selected="false" id="unselected-treeitem" />
   <div role="treeitem" id="not-selectable-treeitem" />
 </div>
-<input type="radio" aria-selected="true" id="selected-native-radio" />
-<input type="radio" aria-selected="false" id="unselected-native-radio" />
-<div role="radio" aria-selected="true" id="selected-radio" />
-<div role="radio" aria-selected="false" id="unselected-radio" />
 <table>
   <thead>
     <tr>
@@ -75,11 +71,6 @@ test('`selected: true` matches `aria-selected="true"` on supported roles', () =>
     'selected-listbox-option',
   ])
 
-  expect(getAllByRole('radio', {selected: true}).map(({id}) => id)).toEqual([
-    'selected-native-radio',
-    'selected-radio',
-  ])
-
   expect(
     getAllByRole('rowheader', {selected: true}).map(({id}) => id),
   ).toEqual(['selected-rowheader', 'selected-native-rowheader'])