Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ampproject/amphtml] ♿ [Story a11y] Accessible close buttons #32925

Merged
merged 4 commits into from
Feb 26, 2021
Merged

[ampproject/amphtml] ♿ [Story a11y] Accessible close buttons #32925

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fde0deb
Accessible close button on inline-attachment. Add Role button.
processprocess Feb 25, 2021
9c51688
Fix importants. Localization element arg
processprocess Feb 25, 2021
76e937b
Merge branch 'master' of github.com:ampproject/amphtml into inline-at…
processprocess Feb 26, 2021
397a89b
Merge branch 'master' of github.com:ampproject/amphtml into inline-at…
processprocess Feb 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions extensions/amp-story/1.0/amp-story-draggable-drawer-header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@
background-repeat: no-repeat !important;
color: rgba(0, 0, 0, 0.87) !important;
cursor: pointer !important;
/* default button style overrides */
box-sizing: content-box !important;
border: none !important;
background-color: transparent !important;
}

.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-page-attachment-close-button {
Expand Down
4 changes: 2 additions & 2 deletions extensions/amp-story/1.0/amp-story-embedded-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export const EMBED_ID_ATTRIBUTE_NAME = 'i-amphtml-embed-id';
*/
const buildExpandedViewOverlay = (element) => htmlFor(element)`
<div class="i-amphtml-story-expanded-view-overflow i-amphtml-story-system-reset">
<button class="i-amphtml-expanded-view-close-button" aria-label="close"></button>
<button class="i-amphtml-expanded-view-close-button" aria-label="close" role="button"></button>
</div>`;

/**
Expand Down Expand Up @@ -282,7 +282,7 @@ function buildDefaultStringStyle(embedData) {
}

/**
* Measures syles for a given element in preparation for its expanded animation.
* Measures styles for a given element in preparation for its expanded animation.
* @param {!Element} element
* @param {!Object} state
* @param {!DOMRect} pageRect
Expand Down
18 changes: 14 additions & 4 deletions extensions/amp-story/1.0/amp-story-page-attachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@
import {Action, StateProperty} from './amp-story-store-service';
import {DraggableDrawer, DrawerState} from './amp-story-draggable-drawer';
import {HistoryState, setHistoryState} from './history';
import {LocalizedStringId} from '../../../src/localized-strings';
import {Services} from '../../../src/services';
import {StoryAnalyticsEvent, getAnalyticsService} from './story-analytics';
import {closest, removeElement} from '../../../src/dom';
import {dev} from '../../../src/log';
import {dev, devAssert} from '../../../src/log';
import {getLocalizationService} from './amp-story-localization-service';
import {getState} from '../../../src/history';
import {htmlFor} from '../../../src/static-template';
import {toggle} from '../../../src/style';
Expand Down Expand Up @@ -105,12 +107,20 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
* @private
*/
buildInline_() {
this.headerEl_.appendChild(
const closeButtonEl = this.headerEl_.appendChild(
htmlFor(this.element)`
<span class="i-amphtml-story-page-attachment-close-button" aria-label="X"
<button class="i-amphtml-story-page-attachment-close-button" aria-label="close"
role="button">
</span>`
</button>`
);
const localizationService = getLocalizationService(devAssert(this.element));
if (localizationService) {
const localizedCloseString = localizationService.getLocalizedString(
LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL
);
closeButtonEl.setAttribute('aria-label', localizedCloseString);
}

this.headerEl_.appendChild(
htmlFor(this.element)`
<span class="i-amphtml-story-page-attachment-title"></span>`
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-story/1.0/amp-story-share-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const getTemplate = (element) => {
return htmlFor(element)`
<div class="i-amphtml-story-share-menu i-amphtml-story-system-reset" aria-hidden="true" role="alert">
<div class="i-amphtml-story-share-menu-container">
<button class="i-amphtml-story-share-menu-close-button" aria-label="close">
<button class="i-amphtml-story-share-menu-close-button" aria-label="close" role="button">
&times;
</button>
</div>
Expand Down