docs(material/select): expand a11y section

Expands the select's a11y section with additional guidance and background on its ARIA treatment.

(cherry picked from commit 0df3a5c)

Author: jelbourn

src/material/select/select.md

@@ -141,13 +141,22 @@ globally cause input errors to show when the input is dirty and invalid.
 - <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item
 
 ### Accessibility
-
-The `<mat-select>` component without text or label should be given a meaningful label via
-`aria-label` or `aria-labelledby`.
-
-The `<mat-select>` component has `role="combobox"`, the dropdown panel has `role="listbox"` and options inside select panel have `role="option"`.
-
-The native `<select>` offers the best accessibility because it is supported directly by screen-readers.
+When possible, prefer a native `<select>` element over `MatSelect`. The native control
+provides the most accessible experience across the widest range of platforms.
+
+`MatSelect` implements the combobox pattern detailed in the [1.2 version of the ARIA
+specification](https://www.w3.org/TR/wai-aria-1.2). The combobox trigger controls a `role="listbox"`
+element opened in a pop-up. Previous versions of the ARIA specification
+required that `role="combobox"` apply to a text input control, but the 1.2 version of the
+specification supports a wider variety of interaction patterns. This newer usage of ARIA works
+in all browser and screen-reader combinations supports by Angular Material.
+
+Because the pop-up uses the `role="listbox"` pattern, you should _not_ put other interactive
+controls, such as buttons or checkboxes, inside a select option. Nesting interactive controls like
+this interferes with most assistive technology.
+
+Always provide an accessible label for the select. This can be done by adding a `<mat-label>`
+inside of `<mat-form-field>`, the `aria-label` attribute, or the `aria-labelledby` attribute.
 
 ### Troubleshooting