Merge pull request #1285 from mlinnetz/bugfix/issue-941-textbox-role

Xon · web-flow · commit 1c6d6103f606 · 2025-03-04T07:33:31.000+08:00
Remove `role="textbox"` from search input, per a11y practices. #941
diff --git a/public/assets/scripts/choices.js b/public/assets/scripts/choices.js
@@ -3247,7 +3247,6 @@
             inp.autocomplete = 'off';
             inp.autocapitalize = 'off';
             inp.spellcheck = false;
-            inp.setAttribute('role', 'textbox');
             inp.setAttribute('aria-autocomplete', 'list');
             if (placeholderValue) {
                 inp.setAttribute('aria-label', placeholderValue);
diff --git a/public/assets/scripts/choices.mjs b/public/assets/scripts/choices.mjs
@@ -3241,7 +3241,6 @@ var templates = {
         inp.autocomplete = 'off';
         inp.autocapitalize = 'off';
         inp.spellcheck = false;
-        inp.setAttribute('role', 'textbox');
         inp.setAttribute('aria-autocomplete', 'list');
         if (placeholderValue) {
             inp.setAttribute('aria-label', placeholderValue);
diff --git a/public/assets/scripts/choices.search-basic.js b/public/assets/scripts/choices.search-basic.js
@@ -2765,7 +2765,6 @@
             inp.autocomplete = 'off';
             inp.autocapitalize = 'off';
             inp.spellcheck = false;
-            inp.setAttribute('role', 'textbox');
             inp.setAttribute('aria-autocomplete', 'list');
             if (placeholderValue) {
                 inp.setAttribute('aria-label', placeholderValue);
diff --git a/public/assets/scripts/choices.search-basic.mjs b/public/assets/scripts/choices.search-basic.mjs
@@ -2759,7 +2759,6 @@ var templates = {
         inp.autocomplete = 'off';
         inp.autocapitalize = 'off';
         inp.spellcheck = false;
-        inp.setAttribute('role', 'textbox');
         inp.setAttribute('aria-autocomplete', 'list');
         if (placeholderValue) {
             inp.setAttribute('aria-label', placeholderValue);
diff --git a/public/assets/scripts/choices.search-prefix.js b/public/assets/scripts/choices.search-prefix.js
@@ -1607,7 +1607,6 @@
             inp.autocomplete = 'off';
             inp.autocapitalize = 'off';
             inp.spellcheck = false;
-            inp.setAttribute('role', 'textbox');
             inp.setAttribute('aria-autocomplete', 'list');
             if (placeholderValue) {
                 inp.setAttribute('aria-label', placeholderValue);
diff --git a/public/assets/scripts/choices.search-prefix.mjs b/public/assets/scripts/choices.search-prefix.mjs
@@ -1601,7 +1601,6 @@ var templates = {
         inp.autocomplete = 'off';
         inp.autocapitalize = 'off';
         inp.spellcheck = false;
-        inp.setAttribute('role', 'textbox');
         inp.setAttribute('aria-autocomplete', 'list');
         if (placeholderValue) {
             inp.setAttribute('aria-label', placeholderValue);
diff --git a/src/scripts/templates.ts b/src/scripts/templates.ts
@@ -337,7 +337,6 @@ const templates: TemplatesInterface = {
     inp.autocapitalize = 'off';
     inp.spellcheck = false;
 
-    inp.setAttribute('role', 'textbox');
     inp.setAttribute('aria-autocomplete', 'list');
     if (placeholderValue) {
       inp.setAttribute('aria-label', placeholderValue);
diff --git a/test/scripts/templates.test.ts b/test/scripts/templates.test.ts
@@ -588,7 +588,6 @@ describe('templates', () => {
           type="search"
           class="${getClassNames(inputOptions.classNames.input).join(' ')} ${getClassNames(inputOptions.classNames.inputCloned).join(' ')}"
           autocomplete="off"
-          role="textbox"
           aria-autocomplete="list"
           aria-label="test placeholder"
         >

Original file line number	Diff line number	Diff line change
`@@ -588,7 +588,6 @@ describe('templates', () => {`
`588`	`588`	`type="search"`
`589`	`589`	`class="${getClassNames(inputOptions.classNames.input).join(' ')} ${getClassNames(inputOptions.classNames.inputCloned).join(' ')}"`
`590`	`590`	`autocomplete="off"`
`591`		`- role="textbox"`
`592`	`591`	`aria-autocomplete="list"`
`593`	`592`	`aria-label="test placeholder"`
`594`	`593`	`>`