javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(range, select): prefer labels passed by developer (#29145)

Browse Source
This commit is contained in:
Liam DeBeasi
2024-03-14 11:14:21 -04:00
committed by GitHub
parent b148b3225b
commit 56014cf64c
8 changed files with 125 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/select/select.tsx
View File

@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
import type { NotchController } from '@utils/forms';
import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms';
import { focusVisibleElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
import type { Attributes } from '@utils/helpers';
import { actionSheetController, alertController, popoverController } from '@utils/overlays';
import type { OverlaySelect } from '@utils/overlays-interface';
@ -874,10 +874,11 @@ export class Select implements ComponentInterface {
}
private get ariaLabel() {
const { placeholder, el, inputId, inheritedAttributes } = this;
const { placeholder, inheritedAttributes } = this;
const displayValue = this.getText();
const { labelText } = getAriaLabel(el, inputId);
const definedLabel = this.labelText ?? inheritedAttributes['aria-label'] ?? labelText;
// The aria label should be preferred over visible text if both are specified
const definedLabel = inheritedAttributes['aria-label'] ?? this.labelText;
/**
* If developer has specified a placeholder

28
core/src/components/select/test/select.spec.tsx
View File

@ -68,6 +68,34 @@ describe('ion-select', () => {
expect(propEl).not.toBe(null);
expect(slotEl).toBe(null);
});
it('should prefer aria label if both attribute and visible text provided', async () => {
const page = await newSpecPage({
components: [Select],
html: `
<ion-select aria-label="Aria Label Text" label="Label Prop Text"></ion-select>
`,
});
const select = page.body.querySelector('ion-select')!;
const nativeButton = select.shadowRoot!.querySelector('button')!;
expect(nativeButton.getAttribute('aria-label')).toBe('Aria Label Text');
});
it('should prefer visible label if only visible text provided', async () => {
const page = await newSpecPage({
components: [Select],
html: `
<ion-select label="Label Prop Text"></ion-select>
`,
});
const select = page.body.querySelector('ion-select')!;
const nativeButton = select.shadowRoot!.querySelector('button')!;
expect(nativeButton.getAttribute('aria-label')).toBe('Label Prop Text');
});
});
describe('select: slot interactivity', () => {