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

[processprocess]

Contributes to #32493
Applies same pattern used in share menu and Twitter overlay's close button.

• Adds role=button back to close button elements (context).
• Adds accessible close button for inline-attachment.
• Fixes typo.

[amp-owners-bot]

Hey @gmajoulet, @newmuis, @Enriqe! These files were changed:

extensions/amp-story/1.0/amp-story-draggable-drawer-header.css
extensions/amp-story/1.0/amp-story-embedded-component.js
extensions/amp-story/1.0/amp-story-page-attachment.js
extensions/amp-story/1.0/amp-story-share-menu.js

[mszylkowski]

Having a button with role="button" is what @gmajoulet was referring to in one of the comments? That would only make sense if there's sth parsing for the role attribute specifically

[gmajoulet]

Having a button with role="button" is what @gmajoulet was referring to in one of the comments? That would only make sense if there's sth parsing for the role attribute specifically

Yes there is, it's very easy to break and we will change it asap, it tripped us many times in the past few weeks (for reference:

amphtml/extensions/amp-story/1.0/page-advancement.js

Lines 439 to 462 in 76cb240

	/**
	* We want clicks on certain elements to be exempted from normal page
	* navigation
	* @param {!Event} event
	* @param {!ClientRect} pageRect
	* @return {boolean}
	* @private
	*/
	isBottomCtaTappableTarget_(event, pageRect) {
	const target = closest(
	dev().assertElement(event.target),
	(el) => {
	const elementRole = el.getAttribute('role');
	if (elementRole) {
	return !!TAPPABLE_ARIA_ROLES[elementRole.toLowerCase()];
	}
	return false;
	},
	/* opt_stopAt */ this.element_
	);
	return !!target && this.isInScreenBottom_(target, pageRect);
	}

)