Change Details

Created as a result of AFB accessibility testing results T323634 ``` a. Additionally, what are your thoughts on this alternate option, which uses aria-hidden on the label element to reduce verbosity for screen readers? This would be an improvement for screen reader users. When navigating with the arrow keys, the screen reader announces the button a single time rather than twice where the second announcement does not provide any additional information. ``` AFB validated approah of using `aria-hidden` to hide the `<label>` element in the checkbox hack, as the `<input>` element is already labeled and is already acting as the "button" for the dropdown. Ordinarily it's considered bad practice to use `aria-hidden` on a visible element, but given AFB's guidance, it should be safe to use in this specific case ### Developer notes

Created as a result of AFB accessibility testing results T323634 ``` a. Additionally, what are your thoughts on this alternate option, which uses aria-hidden on the label element to reduce verbosity for screen readers? This would be an improvement for screen reader users. When navigating with the arrow keys, the screen reader announces the button a single time rather than twice where the second announcement does not provide any additional information. ``` AFB validated approach of using `aria-hidden` to hide the `<label>` element in the checkbox hack, as the `<input>` element is already labeled and is already acting as the "button" for the dropdown. Ordinarily it's considered bad practice to use `aria-hidden` on a visible element, but given AFB's guidance, it should be safe to use in this specific case ### AC [] Navigating dropdown buttons on screenreaders will only read out a single label [] Navigating dropdown buttons with an aria label (i.e. language dropdown) will only read out the aria label ### Developer notes AFB used the [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/805467/ | associated patch ]] in their testing, so we should be able to just use that as is. It has to be updated with our new dropdown templates however. We also want to test everything is correct with dropdowns using aria labels

Created as a result of AFB accessibility testing results T323634 ``` a. Additionally, what are your thoughts on this alternate option, which uses aria-hidden on the label element to reduce verbosity for screen readers? This would be an improvement for screen reader users. When navigating with the arrow keys, the screen reader announces the button a single time rather than twice where the second announcement does not provide any additional information. ``` AFB validated approach of using `aria-hidden` to hide the `<label>` element in the checkbox hack, as the `<input>` element is already labeled and is already acting as the "button" for the dropdown. Ordinarily it's considered bad practice to use `aria-hidden` on a visible element, but given AFB's guidance, it should be safe to use in this specific case ### Developer notesAC [] Navigating dropdown buttons on screenreaders will only read out a single label [] Navigating dropdown buttons with an aria label (i.e. language dropdown) will only read out the aria label ### Developer notes AFB used the [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/805467/ | associated patch ]] in their testing, so we should be able to just use that as is. It has to be updated with our new dropdown templates however. We also want to test everything is correct with dropdowns using aria labels