[508] Not able to tab through radio filters and formly radio fields

[brandydanner-gsa]

Components Involved sds-filters

Expected Behavior When tabbing through filters, you should be able to tab sequentially through radio button options in order to select any of the radio options.

Actual Behavior While tabbing through the radio filter options, the focus jumps from the first option to the next filter section.

Your Environment Angular Version: 14.3.0 "@gsa-sam/components": "14.0.3", "@gsa-sam/layout": "14.0.26", "@gsa-sam/layouts": "14.0.12", "@gsa-sam/ngx-uswds": "14.0.2", "@gsa-sam/ngx-uswds-icons": "14.0.0-beta.2", "@gsa-sam/sam-formly": "14.0.3", "@gsa-sam/sam-material-extensions": "14.0.3", "@gsa-sam/sam-styles": "3.0.10", "@gsa-sam/shared": "14.0.26",

Ticket Number IAEMOD-20198

Additional context

https://cm.usa.gov/confluence/pages/viewpage.action?spaceKey=REL&title=PI+48+Sprint+3+Scarlet

Formly config:

{
  key: 'exclusionTypeGroup',
  templateOptions: { label: 'Exclusion Type', group: 'accordion' },
  fieldGroup: [
    {
      key: 'exclusionTypeId',
      id: 'exclusionTypeId',
      type: 'radio',
      templateOptions: {
        label: 'Exclusion Type',
        labelClass: 'usa-sr-only',
        hideOptional: true,
        defaultValue: null,
        options: [
          { label: 'Ineligible (Proceedings Pending)', value: '1' },
          { label: 'Ineligible (Proceedings Complete)', value: '2' },
          { label: 'Prohibition/Restriction', value: '3' },
          { label: 'Voluntary Exclusion', value: '4' },
          { label: 'All Exclusions', value: null }
        ],
        change: (field) => {
          this.applyFilters(field);
        }
      },
      hooks: {
        onInit: (field: FormlyFieldConfig) => {
          if (this.queryParams.exclusionTypeId != null) {
            field.formControl.setValue(this.queryParams.exclusionTypeId);
          }
        }
      }
    }
  ],
},

[brandydanner-gsa]

Our 508 tester also noted the same radio tabbing issue on a radio field in a formly form.

[yerramshilpa]

@brandydanner-gsa Can you check if the issue exists in the latest version? provided version is old..

[brandydanner-gsa]

@yerramshilpa I confirmed that even with the Angular 16 packages, you cannot tab through each radio option. You can tab to the first option, then you have to use the down arrow key to move through each option. Using the down arrow key also selects each option as you navigate down. Should it be supported that the user can tab through each option?

[yerramshilpa]

@brandydanner-gsa As we discussed the radio button component is working as expected with JAWS and accessibility. The radio button component options are navigated through the arrow keys. Here is the example

https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html