[fix] Refine implicit role of select to include combobox scenarios

Encode implicit roles for `select` elements based on roles defined in https://www.w3.org/TR/html-aria/#el-select - `select` (with a multiple attribute or a size attribute having value greater than 1) will have the implicit role 'listbox' - `select` (with NO multiple attribute and NO size attribute having value greater than 1) will have the implicit role 'combobox' Fixes jsx-eslint#949
lb- · Oct 23, 2024 · 94f3e3f · 94f3e3f
1 parent e5dda96
commit 94f3e3f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/__tests__/src/rules/no-redundant-roles-test.js b/__tests__/src/rules/no-redundant-roles-test.js
@@ -41,12 +41,19 @@ const alwaysValid = [
   { code: '<MyComponent role="button" />' },
   { code: '<button role={`${foo}button`} />' },
   { code: '<Button role={`${foo}button`} />', settings: componentsSettings },
+  { code: '<select role="menu"><option>1</option><option>2</option></select>' },
 ];
 
 const neverValid = [
   { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
   { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
   { code: '<Button role="button" />', settings: componentsSettings, errors: [expectedError('button', 'button')] },
+  { code: '<select role="combobox" size />', errors: [expectedError('select', 'combobox')] },
+  { code: '<select role="combobox" size={1} />', errors: [expectedError('select', 'combobox')] },
+  { code: '<select role="combobox"><option>1</option><option>2</option></select>', errors: [expectedError('select', 'combobox')] },
+  { code: '<select role="listbox" size="3" />', errors: [expectedError('select', 'listbox')] },
+  { code: '<select role="listbox" size={2} />', errors: [expectedError('select', 'listbox')] },
+  { code: '<select role="listbox" multiple><option>1</option><option>2</option></select>', errors: [expectedError('select', 'listbox')] },
 ];
 
 ruleTester.run(`${ruleName}:recommended`, rule, {

diff --git a/src/util/implicitRoles/select.js b/src/util/implicitRoles/select.js
@@ -1,6 +1,16 @@
+import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
+
 /**
- * Returns the implicit role for a select tag.
+ * Returns the implicit role for a select tag depending on attributes.
+ *
+ * @see https://www.w3.org/TR/html-aria/#el-select
  */
-export default function getImplicitRoleForSelect() {
-  return 'listbox';
+export default function getImplicitRoleForSelect(attributes) {
+  const multiple = getProp(attributes, 'multiple');
+  if (multiple) return 'listbox';
+
+  const size = getProp(attributes, 'size') && getLiteralPropValue(getProp(attributes, 'size'));
+  if (size && (Number(size) > 1)) return 'listbox';
+
+  return 'combobox';
 }