Fix(accessibility):fix sa11y accessibility issue for combobox duplicate id & scrollable-region-focusable (#5147)

* Fix(accessibility) fix sa11y accessibility issue for combobox duplicate ID & scrollable

* release version added

* placeholder text updated

* addressed review comments

* release notes updated

* group id updated

* changed to const

* removed comment

* refactored the code

* code refactored

* code refactoring done.

* review comments for group unique id addressed.

* comments removed

* added variables in loop and removed redundant code

Author: manjunathkalburgi

ui/components/combobox/RELEASENOTES.md

@@ -3,6 +3,11 @@
 # Combobox Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.21.0
+### Fixed
+- Fixed by adding tabindex for `scrollable region must have keyboard access` wcag issue
+- Fixed by adding dynamic Ids for duplicate-id-aria issue
+- Fixed by adding unique Ids,aria-label for `aria-allowed-attr` wcag issue
 
 ## 2.17.3
 

ui/components/combobox/autocomplete/example.jsx

@@ -47,7 +47,7 @@ export default [
     )
   }
 ];
-
+const newStateID  =_.uniqueId('listbox-id-');
 export let states = [
   {
     context: STORY_SINK_CONTEXT,
@@ -88,7 +88,7 @@ export let states = [
     label: 'Lookup - Focused - Open',
     element: (
       <Combobox
-        id={_.uniqueId('combobox-id-')}
+        id={newStateID}
         aria-controls="listbox-id-15"
         autocomplete
         inputIconPosition="right"
@@ -107,6 +107,8 @@ export let states = [
             snapshot={Snapshot.EntityOptions}
             type="entity"
             count={2}
+            aria-labelledby={newStateID}
+            aria-label="{{Placeholder for Menu Items}}"
           />
         }
         resultsType="listbox"
@@ -261,7 +263,7 @@ export let states = [
     element: (
       <Combobox
         id={_.uniqueId('combobox-id-')}
-        aria-controls="listbox-unique-id-03"
+        aria-controls="listbox-id-20"
         autocomplete
         inputIconPosition="right"
         rightInputIcon={
@@ -274,7 +276,7 @@ export let states = [
         }
         results={
           <Listbox
-            id="listbox-unique-id-03"
+            id="listbox-id-20"
             snapshot={Snapshot.PlainOptions}
             type="entity"
             count={3}

ui/components/combobox/base/example.jsx

@@ -17,13 +17,14 @@ import { StandardIcon } from '../../icons/standard/example';
 import Grid, { Column } from '../../../utilities/grid/docs/Grid';
 import _ from '../../../shared/helpers';
 import * as Snapshot from '../snapshots.data';
+import uniqueId from 'lodash.uniqueid';
 
 /* -----------------------------------------------------------------------------
     Variables
 ----------------------------------------------------------------------------- */
 const STORY_SINK_CONTEXT = 'Select-Only (Base)';
-const listboxOptionId01 = 'listbox-option-unique-id-01';
-const listboxOptionId02 = 'listbox-option-unique-id-02';
+const listboxOptionId01 = uniqueId('option');
+const listboxOptionId02 = uniqueId('option');
 
 /* -----------------------------------------------------------------------------
     Private
@@ -33,7 +34,7 @@ export const ListboxDropdown = props => (
   <DeprecatedListbox
     listboxClassName="slds-dropdown slds-dropdown_fluid"
     vertical
-    id="listbox-unique-id"
+    id="listbox-unique-id-03"
   >
     <DeprecatedListboxItem>
       <DeprecatedEntityOption
@@ -53,35 +54,38 @@ export const ListboxDropdown = props => (
   </DeprecatedListbox>
 );
 
-const ComboBoxDefault = props => (
-  <Combobox
-    id={_.uniqueId('combobox-id-')}
-    aria-controls="listbox-id-1"
-    inputIconPosition="right"
-    rightInputIcon={
-      <UtilityIcon
-        symbol="down"
-        className="slds-icon slds-icon_x-small slds-icon-text-default"
-        containerClassName="slds-input__icon slds-input__icon_right"
-        assistiveText={false}
-        title={false}
-      />
-    }
-    results={
-      <Listbox
-      id="listbox-id-1"
-      snapshot={Snapshot.ObjectOptions}
-      type="plain"
-      count={8}
-      visualSelection
-      />
-    }
-    resultsType="listbox"
-    hasInteractions
-    selectOnly
-    {...props}
-  />
-)
+const ComboBoxDefault = props => {
+  const comboboxDefaultID = uniqueId('listbox-id-');
+  return (
+    <Combobox
+      id={_.uniqueId('combobox-id-')}
+      aria-controls={comboboxDefaultID}
+      inputIconPosition="right"
+      rightInputIcon={
+        <UtilityIcon
+          symbol="down"
+          className="slds-icon slds-icon_x-small slds-icon-text-default"
+          containerClassName="slds-input__icon slds-input__icon_right"
+          assistiveText={false}
+          title={false}
+        />
+      }
+      results={
+        <Listbox
+          id={comboboxDefaultID}
+          snapshot={Snapshot.ObjectOptions}
+          type="plain"
+          count={8}
+          visualSelection
+        />
+      }
+      resultsType="listbox"
+      hasInteractions
+      selectOnly
+      {...props}
+    />
+  );
+};
 
 /* -----------------------------------------------------------------------------
     Exports

ui/components/combobox/deprecated-inline-listbox/example.jsx

@@ -10,13 +10,14 @@ import {
   DeprecatedListboxItem,
   DeprecatedEntityOption
 } from '../deprecated';
+import uniqueId from 'lodash.uniqueid';
 
 /* -----------------------------------------------------------------------------
     Variables
 ----------------------------------------------------------------------------- */
 const STORY_SINK_CONTEXT = 'Deprecated – Inline-Listbox';
-const listboxOptionId01 = 'listbox-option-unique-id-01';
-const listboxOptionId02 = 'listbox-option-unique-id-02';
+const listboxOptionId01 = uniqueId('listbox-option-unique-id-');
+const listboxOptionId02 = uniqueId('listbox-option-unique-id-');
 
 /* -----------------------------------------------------------------------------
     Private
@@ -26,7 +27,7 @@ const ListboxDropdown = props => (
   <DeprecatedListbox
     listboxClassName="slds-dropdown slds-dropdown_fluid"
     vertical
-    id="listbox-unique-id"
+    id="listbox-unique-id-03"
   >
     <DeprecatedListboxItem>
       <DeprecatedEntityOption

ui/components/combobox/deprecated-multi-entity/example.jsx

@@ -12,8 +12,8 @@ import {
 import { ListboxPills, ListboxPillsItem, ListboxPill } from '../../pills';
 
 const STORY_SINK_CONTEXT = 'Deprecated – Multi-Entity';
-const listboxOptionId01 = 'listbox-option-unique-id-01';
-const listboxOptionId02 = 'listbox-option-unique-id-02';
+const listboxOptionId01 = 'option1';
+const listboxOptionId02 = 'option2';
 
 const ListboxDropdown = props => (
   <DeprecatedListbox

ui/components/combobox/deprecated/index.jsx

@@ -10,7 +10,6 @@ import { UtilityIcon } from '../../icons/base/example';
 import { Spinner } from '../../spinners/base/example';
 import classNames from 'classnames';
 import _ from '../../../shared/helpers';
-
 /**
  * Object switcher is a popup menu button, its visually displayed inlined with
  * its adjacent objects. A "polymorphic" combobox example uses this.
@@ -98,11 +97,7 @@ export const DeprecatedComboboxInputElement = ({
       id={id || comboboxId}
       aria-activedescendant={props['aria-activedescendant']}
       aria-autocomplete={autocomplete ? 'list' : null}
-      aria-controls={
-        props.listbox
-          ? props['aria-controls'] || props.listboxId
-          : props['aria-controls'] || 'please-provide-listbox-id-here'
-      }
+      aria-controls="listbox-unique-id-03"
       autocomplete="off"
       role="combobox"
       aria-expanded={isOpen ? 'true' : 'false'}
@@ -324,10 +319,11 @@ export const DeprecatedCombobox = props => {
  */
 export let DeprecatedListbox = props => (
   <div
-    id={props.id || 'listbox-unique-id'}
+    id={props.id || 'listbox-unique-id-03'}
     role="listbox"
     aria-orientation={props.horizontal || props.inline ? 'horizontal' : null}
     className={props.listboxClassName}
+    aria-label="{{Placeholder for Dropdown Options}}"
   >
     <ul
       className={classNames(
@@ -367,11 +363,11 @@ export let DeprecatedListboxItem = props => (
  * @prop {string}  className - A CSS class for the outer element
  */
 export let DeprecatedListboxOption = props => {
-  const uniqueId = _.uniqueId('listbox-option-unique-id-');
+
 
   return (
     <div
-      id={props.id || uniqueId}
+      id={props.id || _.uniqueId('listbox-option-unique-id-')}
       className={classNames(
         'slds-media slds-listbox__option',
         {