feat: Adding aria label to property filter token operator button

pages/property-filter/common-props.tsx

@@ -151,6 +151,7 @@ export const i18nStrings: PropertyFilterProps.I18nStrings = {
   tokenLimitShowMore: 'Show more',
   tokenLimitShowFewer: 'Show fewer',
   clearFiltersText: 'Clear filters',
+  tokenOperatorAriaLabel: 'Boolean Operator',
   removeTokenButtonAriaLabel: () => 'Remove token',
   enteredTextLabel: (text: string) => `Use: "${text}"`,
 };

src/internal/components/filtering-token/index.tsx

@@ -19,6 +19,7 @@ export interface FilteringTokenProps {
   andText: string;
   orText: string;
   dismissAriaLabel?: string;
+  operatorAriaLabel?: string;
   disabled?: boolean;
 
   children: React.ReactNode;
@@ -33,6 +34,7 @@ export default function FilteringToken({
   andText,
   orText,
   dismissAriaLabel,
+  operatorAriaLabel,
   disabled,
   children,
   onChange,
@@ -52,6 +54,7 @@ export default function FilteringToken({
           selectedOption={{ value: operation, label: operation === 'and' ? andText : orText }}
           onChange={e => onChange(e.detail.selectedOption.value as FilteringTokenProps.Operation)}
           disabled={disabled}
+          ariaLabel={operatorAriaLabel}
         />
       )}
       <div

src/property-filter/__tests__/common.ts

@@ -35,6 +35,7 @@ export const i18nStrings = {
   tokenLimitShowMore: 'Show more',
   tokenLimitShowFewer: 'Show fewer',
   clearFiltersText: 'Clear filters',
+  tokenOperatorAriaLabel: 'Boolean Operator',
   removeTokenButtonAriaLabel: (token: Token) =>
     'Remove token ' + token.propertyKey + ' ' + token.operator + ' ' + token.value,
   enteredTextLabel: (text: string) => `Use: "${text}"`,

src/property-filter/__tests__/property-filter.test.tsx

@@ -453,6 +453,12 @@ describe('property filter parts', () => {
           expect.objectContaining({ detail: expect.objectContaining({ operation: 'and' }) })
         );
       });
+
+      test('can be used to check aria-label attirbute on the filter token operator', () => {
+        const secondToken = wrapper.findTokens()![1];
+        const operator = secondToken.findTokenOperation()?.findDropdown();
+        expect(operator?.findAll('button')[0].getElement()).toHaveAttribute('aria-label', 'Boolean Operator');
+      });
     });
     describe('dismiss button', () => {
       test('causes onChange to fire, removing the token', () => {

src/property-filter/interfaces.ts

@@ -215,6 +215,7 @@ export namespace PropertyFilterProps {
     tokenLimitShowMore?: string;
     tokenLimitShowFewer?: string;
     clearFiltersText: string;
+    tokenOperatorAriaLabel?: string;
     removeTokenButtonAriaLabel: (token: PropertyFilterProps.Token) => string;
     enteredTextLabel: AutosuggestProps.EnteredTextLabel;
   }

src/property-filter/token.tsx

@@ -70,6 +70,7 @@ export const TokenButton = ({
       andText={i18nStrings.operationAndText}
       orText={i18nStrings.operationOrText}
       dismissAriaLabel={i18nStrings.removeTokenButtonAriaLabel(token)}
+      operatorAriaLabel={i18nStrings.tokenOperatorAriaLabel}
       onChange={setOperation}
       onDismiss={removeToken}
       disabled={disabled}

src/select/parts/trigger.tsx

@@ -21,6 +21,7 @@ export interface TriggerProps extends FormFieldValidationControlProps {
   isOpen?: boolean;
   triggerVariant?: SelectProps.TriggerVariant;
   inFilteringToken?: boolean;
+  ariaLabel?: string;
 }
 
 const Trigger = React.forwardRef(
@@ -37,6 +38,7 @@ const Trigger = React.forwardRef(
       isOpen,
       placeholder,
       disabled,
+      ariaLabel,
     }: TriggerProps,
     ref: React.Ref<HTMLButtonElement>
   ) => {
@@ -73,6 +75,7 @@ const Trigger = React.forwardRef(
         inFilteringToken={inFilteringToken}
         ariaDescribedby={ariaDescribedby}
         ariaLabelledby={joinStrings(ariaLabelledby, triggerContentId)}
+        ariaLabel={ariaLabel}
       >
         {triggerContent}
       </ButtonTrigger>