mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
fix(overlays,picker): remove invalid aria-hidden attribute (#30563)
Issue number: resolves #30040 --------- ## What is the current behavior? - The usage of `aria-hidden="true"` attributes both on overlay and picker components was causing some console error/warnings messages. - This was being caused due the fact of the activeElement (focused element) was inside those elements with this attribute that's equal to true in all cases.  ## What is the new behavior? - There is no need of making usage of this attribute due the facts: - 1. Once overlay is closed the focus will be redirect to the element that triggers the overlay, this way screen readers will be also redirected to the same context of focused element. - 2. After overlay is closed, it will be set as a `display: none;` through the selector `:host(.overlay-hidden)`, which by itself will disable overlay content for the screen readers. - Removed overlay tests since they were basically checking about `aria-hidden` attribute. - Updated PickerColumn and PickerColumnOption structure in order to fit the a11y needs. - Added a focus management system to better drive users when making usage of keyboard navigation inside picker. - Skip A11Y test validation when reported violation is color contrast related. ### ⚠️ NOTE: - Reported devTools issue/warning when selecting picker is **from now on** expected due to focus an input that's set with `tabIndex="-1"` and `aria-hidden="true"` - Which turns into an A11Y violation when it gets focused. It happens that it gets focused dynamically in order to open the native numeric keyboard **once user selects highlighted picker values zone**, in order to allow users to insert numeric values through the keyboard. If this `aria-hidden` and `tabindex` are removed/updated, the existing functionality will be lost since ScreenReaders will start to ignore the updated value through the PickerChange and will be focused onto the focused input. This mentioned input has an onChange event that's used to update the `aria-valuetext` on each `picker-column` which is being capture by the ScreenReader. That said, this new devTools reported issue/warning is a false positive since A11Y behaviour is being covered through a different perspective. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Testing: - ✅ [ActionSheet Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/action-sheet/test/a11y) - ✅ [Alert Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/alert/test/a11y) - ✅ [DateTime Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime/test/basic) - ✅ [DateTime Button Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime-button/test/basic) - ✅ [Modal Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y) - ✅ [Popover Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/popover/test/basic) - ✅ [Select Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic) - ✅ [Picker, PickerColumn and PickerColumnOption Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/picker/test/basic) - ✅ [Toast Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/toast/test/a11y) ## Other Information Dev build: `8.7.4-dev.11756388042.1a103a79` --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
This commit is contained in:
José Rio
@ -653,39 +653,6 @@ export class PickerColumn implements ComponentInterface {
|
||||
return el ? el.getAttribute('aria-label') ?? el.innerText : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Render an element that overlays the column. This element is for assistive
|
||||
* tech to allow users to navigate the column up/down. This element should receive
|
||||
* focus as it listens for synthesized keyboard events as required by the
|
||||
* slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
|
||||
*/
|
||||
private renderAssistiveFocusable = () => {
|
||||
const { activeItem } = this;
|
||||
const valueText = this.getOptionValueText(activeItem);
|
||||
|
||||
/**
|
||||
* When using the picker, the valuetext provides important context that valuenow
|
||||
* does not. Additionally, using non-zero valuemin/valuemax values can cause
|
||||
* WebKit to incorrectly announce numeric valuetext values (such as a year
|
||||
* like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
|
||||
*/
|
||||
return (
|
||||
<div
|
||||
ref={(el) => (this.assistiveFocusable = el)}
|
||||
class="assistive-focusable"
|
||||
role="slider"
|
||||
tabindex={this.disabled ? undefined : 0}
|
||||
aria-label={this.ariaLabel}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={0}
|
||||
aria-valuenow={0}
|
||||
aria-valuetext={valueText}
|
||||
aria-orientation="vertical"
|
||||
onKeyDown={(ev) => this.onKeyDown(ev)}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { color, disabled, isActive, numericInput } = this;
|
||||
const mode = getIonMode(this);
|
||||
@ -699,33 +666,21 @@ export class PickerColumn implements ComponentInterface {
|
||||
['picker-column-disabled']: disabled,
|
||||
})}
|
||||
>
|
||||
{this.renderAssistiveFocusable()}
|
||||
<slot name="prefix"></slot>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="picker-opts"
|
||||
ref={(el) => {
|
||||
this.scrollEl = el;
|
||||
}}
|
||||
/**
|
||||
* When an element has an overlay scroll style and
|
||||
* a fixed height, Firefox will focus the scrollable
|
||||
* container if the content exceeds the container's
|
||||
* dimensions.
|
||||
*
|
||||
* This causes keyboard navigation to focus to this
|
||||
* element instead of going to the next element in
|
||||
* the tab order.
|
||||
*
|
||||
* The desired behavior is for the user to be able to
|
||||
* focus the assistive focusable element and tab to
|
||||
* the next element in the tab order. Instead of tabbing
|
||||
* to this element.
|
||||
*
|
||||
* To prevent this, we set the tabIndex to -1. This
|
||||
* will match the behavior of the other browsers.
|
||||
*/
|
||||
tabIndex={-1}
|
||||
role="slider"
|
||||
tabindex={this.disabled ? undefined : 0}
|
||||
aria-label={this.ariaLabel}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={0}
|
||||
aria-valuenow={0}
|
||||
aria-valuetext={this.getOptionValueText(this.activeItem)}
|
||||
aria-orientation="vertical"
|
||||
onKeyDown={(ev) => this.onKeyDown(ev)}
|
||||
>
|
||||
<div class="picker-item-empty" aria-hidden="true">
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { h } from '@stencil/core';
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { PickerColumn } from '../picker-column';
|
||||
import { PickerColumnOption } from '../../picker-column-option/picker-column-option';
|
||||
import { PickerColumn } from '../picker-column';
|
||||
|
||||
describe('picker-column: assistive element', () => {
|
||||
describe('picker-column', () => {
|
||||
beforeEach(() => {
|
||||
const mockIntersectionObserver = jest.fn();
|
||||
mockIntersectionObserver.mockReturnValue({
|
||||
@ -22,9 +22,9 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
|
||||
|
||||
expect(assistiveFocusable.getAttribute('aria-label')).not.toBe(null);
|
||||
expect(pickerOpts.getAttribute('aria-label')).not.toBe(null);
|
||||
});
|
||||
|
||||
it('should have a custom label', async () => {
|
||||
@ -34,9 +34,9 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
|
||||
|
||||
expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
|
||||
expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
|
||||
});
|
||||
|
||||
it('should update a custom label', async () => {
|
||||
@ -46,12 +46,12 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
|
||||
|
||||
pickerCol.setAttribute('aria-label', 'my label');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
|
||||
expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
|
||||
});
|
||||
|
||||
it('should receive keyboard focus when enabled', async () => {
|
||||
@ -61,9 +61,9 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;
|
||||
|
||||
expect(assistiveFocusable.tabIndex).toBe(0);
|
||||
expect(pickerOpts.tabIndex).toBe(0);
|
||||
});
|
||||
|
||||
it('should not receive keyboard focus when disabled', async () => {
|
||||
@ -73,9 +73,9 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;
|
||||
|
||||
expect(assistiveFocusable.tabIndex).toBe(-1);
|
||||
expect(pickerOpts.tabIndex).toBe(-1);
|
||||
});
|
||||
|
||||
it('should use option aria-label as assistive element aria-valuetext', async () => {
|
||||
@ -91,9 +91,9 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
|
||||
|
||||
expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Label');
|
||||
expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Label');
|
||||
});
|
||||
|
||||
it('should use option text as assistive element aria-valuetext when no label provided', async () => {
|
||||
@ -107,8 +107,8 @@ describe('picker-column: assistive element', () => {
|
||||
});
|
||||
|
||||
const pickerCol = page.body.querySelector('ion-picker-column')!;
|
||||
const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
|
||||
const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
|
||||
|
||||
expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Text');
|
||||
expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Text');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user