mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix: add aria-hidden="true" to ripple, focus ring, and elevation
PiperOrigin-RevId: 562075778
This commit is contained in:
parent
cdd2ea6c1d
commit
2295f12e71
@ -56,15 +56,12 @@ export abstract class Chip extends LitElement {
|
||||
}
|
||||
|
||||
protected renderContainerContent() {
|
||||
// Note: add aria-hidden="true" to focus ring and ripple. For some reason
|
||||
// they cause VoiceOver to get stuck inside filter chip sets without it.
|
||||
// TODO(b/297428579): investigate and file VoiceOver bug
|
||||
return html`
|
||||
${this.renderOutline()}
|
||||
<md-focus-ring part="focus-ring" for=${this.primaryId}
|
||||
aria-hidden="true"></md-focus-ring>
|
||||
<md-ripple for=${this.primaryId} ?disabled=${this.rippleDisabled}
|
||||
aria-hidden="true"></md-ripple>
|
||||
<md-focus-ring part="focus-ring"
|
||||
for=${this.primaryId}></md-focus-ring>
|
||||
<md-ripple for=${this.primaryId}
|
||||
?disabled=${this.rippleDisabled}></md-ripple>
|
||||
${this.renderPrimaryAction(this.renderPrimaryContent())}
|
||||
`;
|
||||
}
|
||||
|
@ -8,7 +8,7 @@
|
||||
<div>
|
||||
<div class="fab-wrapper">
|
||||
<md-fab label="navigate" variant="primary">
|
||||
<md-icon slot="icon" aria-hidden="true">navigation</md-icon>
|
||||
<md-icon slot="icon">navigation</md-icon>
|
||||
</md-fab>
|
||||
</div>
|
||||
<span>1</span>
|
||||
@ -22,4 +22,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -10,6 +10,13 @@ import {html, LitElement} from 'lit';
|
||||
* A component for elevation.
|
||||
*/
|
||||
export class Elevation extends LitElement {
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Needed for VoiceOver, which will create a "group" if the element is a
|
||||
// sibling to other content.
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
protected override render() {
|
||||
return html`<span class="shadow"></span>`;
|
||||
}
|
||||
|
@ -56,6 +56,13 @@ export class FocusRing extends LitElement implements Attachable {
|
||||
this.attachableController.detach();
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Needed for VoiceOver, which will create a "group" if the element is a
|
||||
// sibling to other content.
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
/** @private */
|
||||
handleEvent(event: FocusRingEvent) {
|
||||
if (event[HANDLED_BY_FOCUS_RING]) {
|
||||
|
@ -18,10 +18,14 @@ export class Icon extends LitElement {
|
||||
super.connectedCallback();
|
||||
const ariaHidden = this.getAttribute('aria-hidden');
|
||||
if (ariaHidden === 'false') {
|
||||
// Allow the user to set `aria-hidden="false"` to create an icon that is
|
||||
// announced by screenreaders.
|
||||
this.removeAttribute('aria-hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Needed for VoiceOver, which will create a "group" if the element is a
|
||||
// sibling to other content.
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
}
|
||||
|
@ -126,6 +126,13 @@ export class Ripple extends LitElement implements Attachable {
|
||||
this.attachableController.detach();
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Needed for VoiceOver, which will create a "group" if the element is a
|
||||
// sibling to other content.
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
protected override render() {
|
||||
const classes = {
|
||||
'hovered': this.hovered,
|
||||
|
@ -367,8 +367,7 @@ function getTabContentGenerator(knobs: StoryKnobs) {
|
||||
const useIcon = contentKnob !== 'label';
|
||||
const useLabel = contentKnob !== 'icon';
|
||||
return (icon: string, label: string) => {
|
||||
const iconTemplate =
|
||||
html`<md-icon aria-hidden="true" slot="icon">${icon}</md-icon>`;
|
||||
const iconTemplate = html`<md-icon slot="icon">${icon}</md-icon>`;
|
||||
return html`
|
||||
${useIcon ? iconTemplate : nothing}
|
||||
${useLabel ? html`${label}` : nothing}
|
||||
|
Loading…
Reference in New Issue
Block a user