There are a couple of places where we output ARIA attributes with bound boolean values – sometimes the value is true, sometimes false, depending on internal component state. Examples include:

• Tab component: possesses an aria-hidden attribute whose value is false if the tab is active and true if not
• Tabs and Menu components: items displayed in a list have an aria-selected attribute whose value is true if the item (tab heading or menu item) is currently selected, and false otherwise.

In Vue 2, attributes with false-y values would not get output in the resulting HTML at all. In Vue 3, this behavior changed, and now bindings like aria-selected="false" will get included in the rendered output.

I'm not aware of this change in behavior causing any problems, as a general rule I believe that we are better off by removing attributes like aria-hidden="false" and aria-selected="false" entirely – we are shipping redundant code and might eventually confuse someone (either human user or screen reader).

Acceptance Criteria

• Find all instances in Codex where aria-* attributes are bound (via v-bind) to a false value
• Update the code to explicitly provide a null or undefined attribute value here instead (meaning the attribute won't show up in the rendered output unless its value is truthy).