[ChipGroup][a11y] Add a show all Chip for a11y

Since scrolling is not ideal for our a11y users, a Chip showing a full list has been added to the ChipGroup Catalog demos, allowing for selection without scroll.

PiperOrigin-RevId: 750328856

Author: paulfthomas

catalog/java/io/material/catalog/chip/ChipGroupDemoFragment.java

@@ -19,7 +19,9 @@
 import io.material.catalog.R;
 
 import android.os.Bundle;
+import androidx.appcompat.widget.PopupMenu;
 import android.view.LayoutInflater;
+import android.view.Menu;
 import android.view.View;
 import android.view.ViewGroup;
 import androidx.annotation.LayoutRes;
@@ -34,7 +36,6 @@
 public class ChipGroupDemoFragment extends DemoFragment {
 
   private MaterialSwitch singleSelectionSwitch;
-  private MaterialSwitch selectionRequiredSwitch;
 
   @Nullable
   @Override
@@ -43,7 +44,7 @@ public View onCreateDemoView(
     View view = layoutInflater.inflate(getChipGroupContent(), viewGroup, false /* attachToRoot */);
 
     singleSelectionSwitch = view.findViewById(R.id.single_selection);
-    selectionRequiredSwitch = view.findViewById(R.id.selection_required);
+    MaterialSwitch selectionRequiredSwitch = view.findViewById(R.id.selection_required);
 
     ChipGroup reflowGroup = view.findViewById(R.id.reflow_group);
     ChipGroup scrollGroup = view.findViewById(R.id.scroll_group);
@@ -53,28 +54,28 @@ public View onCreateDemoView(
           reflowGroup.setSingleSelection(isChecked);
           scrollGroup.setSingleSelection(isChecked);
 
-          initChipGroup(reflowGroup);
-          initChipGroup(scrollGroup);
+          initChipGroup(reflowGroup, false);
+          initChipGroup(scrollGroup, true);
         });
 
     selectionRequiredSwitch.setOnCheckedChangeListener(
         (buttonView, isChecked) -> {
           reflowGroup.setSelectionRequired(isChecked);
           scrollGroup.setSelectionRequired(isChecked);
 
-          initChipGroup(reflowGroup);
-          initChipGroup(scrollGroup);
+          initChipGroup(reflowGroup, false);
+          initChipGroup(scrollGroup, true);
         });
 
-    initChipGroup(reflowGroup);
-    initChipGroup(scrollGroup);
+    initChipGroup(reflowGroup, false);
+    initChipGroup(scrollGroup, true);
 
     FloatingActionButton fab = view.findViewById(R.id.cat_chip_group_refresh);
     fab.setOnClickListener(
         v -> {
           // Reload the chip group UI.
-          initChipGroup(reflowGroup);
-          initChipGroup(scrollGroup);
+          initChipGroup(reflowGroup, false);
+          initChipGroup(scrollGroup, true);
         });
     return view;
   }
@@ -91,15 +92,39 @@ protected int getChipGroupItem(boolean singleSelection) {
         : R.layout.cat_chip_group_item_filter;
   }
 
-  private void initChipGroup(ChipGroup chipGroup) {
+  private void initChipGroup(ChipGroup chipGroup, boolean shouldShowAll) {
     chipGroup.removeAllViews();
 
+    PopupMenu menu;
+    if (shouldShowAll) {
+      Chip viewAllChip = new Chip(chipGroup.getContext());
+      viewAllChip.setText(viewAllChip.getResources().getString(R.string.cat_chip_text_all));
+      viewAllChip.setChipIconResource(R.drawable.ic_drawer_menu_open_24px);
+      viewAllChip.setChipIconTint(viewAllChip.getTextColors());
+      viewAllChip.setChipIconVisible(true);
+      menu = new PopupMenu(viewAllChip.getContext(), viewAllChip);
+      viewAllChip.setOnClickListener(v -> menu.show());
+      chipGroup.addView(viewAllChip);
+    } else {
+      menu = null;
+    }
+
     boolean singleSelection = singleSelectionSwitch.isChecked();
     String[] textArray = getResources().getStringArray(R.array.cat_chip_group_text_array);
-    for (String text : textArray) {
+    for (int i = 0; i < textArray.length; i++) {
+      if (menu != null) {
+        menu.getMenu().add(Menu.NONE, i, i, textArray[i]);
+        menu.setOnMenuItemClickListener(
+            menuItem -> {
+              chipGroup.check(menuItem.getItemId());
+              return true;
+            });
+      }
+
       Chip chip =
           (Chip) getLayoutInflater().inflate(getChipGroupItem(singleSelection), chipGroup, false);
-      chip.setText(text);
+      chip.setId(i);
+      chip.setText(textArray[i]);
       chip.setCloseIconVisible(true);
       chip.setOnCloseIconClickListener(v -> chipGroup.removeView(chip));
       chipGroup.addView(chip);

catalog/java/io/material/catalog/chip/ChipRecyclerviewDemoFragment.java

@@ -20,8 +20,10 @@
 
 import android.os.Bundle;
 import androidx.recyclerview.widget.LinearLayoutManager;
+import androidx.appcompat.widget.PopupMenu;
 import androidx.recyclerview.widget.RecyclerView;
 import android.view.LayoutInflater;
+import android.view.Menu;
 import android.view.View;
 import android.view.ViewGroup;
 import androidx.annotation.LayoutRes;
@@ -42,8 +44,7 @@ public class ChipRecyclerviewDemoFragment extends DemoFragment {
   @Override
   public View onCreateDemoView(
       LayoutInflater layoutInflater, @Nullable ViewGroup viewGroup, @Nullable Bundle bundle) {
-    View view = layoutInflater.inflate(getChipContent(), viewGroup, false /* attachToRoot
-  */);
+    View view = layoutInflater.inflate(getChipContent(), viewGroup, false /* attachToRoot */);
 
     recyclerView = view.findViewById(R.id.chip_recyclerview_parent);
     layoutManager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
@@ -58,6 +59,10 @@ public View onCreateDemoView(
   /** A RecyclerView adapter that displays the checkable chips. */
   public static class ChipAdapter extends RecyclerView.Adapter<ChipAdapter.MyViewHolder> {
     private final Set<Integer> checkedChipId = new HashSet<>(getItemCount());
+    private PopupMenu menu;
+
+    private static final int VIEW_TYPE_NORMAL = 0;
+    private static final int VIEW_TYPE_ALL = 1;
 
     /** Provide a reference to the views for each data item. */
     public static class MyViewHolder extends RecyclerView.ViewHolder {
@@ -91,15 +96,51 @@ public ChipAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewTyp
 
     @Override
     public void onBindViewHolder(MyViewHolder holder, int position) {
-      holder.chip.setTag(position);
-      holder.chip.setChecked(checkedChipId.contains(position));
-      holder.chip.setText(
-          holder.chip.getResources().getString(R.string.cat_chip_text) + " " + position);
+      Chip chip = holder.chip;
+      String text = chip.getResources().getString(R.string.cat_chip_text);
+      chip.setTag(position);
+      if (getItemViewType(position) == VIEW_TYPE_ALL) {
+        chip.setCheckable(false);
+        chip.setText(chip.getResources().getString(R.string.cat_chip_text_all));
+        chip.setChipIconResource(R.drawable.ic_drawer_menu_open_24px);
+        chip.setChipIconTint(chip.getTextColors());
+        chip.setChipIconVisible(true);
+
+        if (menu == null) {
+          menu = new PopupMenu(chip.getContext(), chip);
+          for (int i = 1; i < getItemCount(); i++) {
+            menu.getMenu().add(Menu.NONE, i, i, text + " " + i);
+          }
+          menu.setOnMenuItemClickListener(
+              menuItem -> {
+                int id = menuItem.getItemId();
+                if (!checkedChipId.remove(id)) {
+                  checkedChipId.add(id);
+                }
+                notifyItemChanged(id);
+                return true;
+              });
+        }
+        chip.setOnClickListener(v -> menu.show());
+      } else {
+        chip.setChecked(checkedChipId.contains(position));
+        chip.setText(text + " " + position);
+      }
     }
 
     @Override
     public int getItemCount() {
-      return 30;
+      return 31;
+    }
+
+    @Override
+    public long getItemId(int position) {
+      return position;
+    }
+
+    @Override
+    public int getItemViewType(int position) {
+      return position == 0 ? VIEW_TYPE_ALL : VIEW_TYPE_NORMAL;
     }
   }
 

catalog/java/io/material/catalog/chip/res/values/strings.xml

@@ -24,6 +24,7 @@
     action.
   </string>
 
+  <string name="cat_chip_text_all">Show All</string>
   <string name="cat_chip_text">Hello, World!</string>
   <string name="cat_chip_text_to_truncate">Hello, very very very very very very very very big World!</string>
   <string name="cat_chip_long_text_switch_label">Long text</string>