I'm noticing that the <amp-web-push> component includes space for both a subscribe and an unsubscribe button, but only renders one or the other depending on your setting. This leads to a gap of white space above or below the rendered button.
I also see that on iOS, where web push is not supported, both buttons show up as blank white space.
Is there any valid way in AMP to shrink the invisible web push button so it does not take up precious browser real estate?
Here's a link to reproduce the issue (you can also reference the screenshots below): https://globalnews.ca/news/7453249/us-election-biden-transition-legal/amp/
Subscribe button doesn't render:
Unsubscribe button doesn't render:
Both buttons don't render on iOS:
Related
I have to capture screenshot all things in scroll view, I use keyword Selenium2Library.Capture Page Screenshot and then zoom out but it got only visible screen.
Search Transaction Data By Input Date
Input Text &{Transaction}[startDate] ${STARTDATE}
Input Text &{Transaction}[endDate] ${ENDDATE}
Click Element &{Transaction}[searchBtn]
Wait Until Element Is Visible &{Transaction}[firstTransDate] timeout=10s
Firefox Browser Zoom Out 3
capture page screenshot
Appreciate everyone can suggest if there are other ways to capture all things in scroll view.
I have a form inside an Angular Material Dialog component. My problem is that when an input field gets focus, the keyboard opening in mobile devices covers the input field the user wants to write into.
When the keyboard opens the main body of the HTML gets az appropriate margin-bottom, however, this does not apply to the dialog's wrapper (cdk-overlay-container), since it's position is fixed.
My ideas:
1, Changing from fixed to absolute could solve my problem, however since my main container is a huge scroll-container, that would only work if I scroll to the top programmatically, which I don't really like.
2, If I could detect that a keyboard was opened, I could add a class to a parent container, however, I'm not sure how to do this without attaching an event to every input field we have, which feels ugly and unnecessarily heavy (since I'd have to send events to notify other components). I would also need to know the size of the keyboard, which I'm not sure is possible.
The issue occurs on both Android and iOS.
I've been working over the past several months to make a site accessible and a JAWS issue has recently brought to my attention by our QA department.
I've put up a CodePen showing an example similar to what I've built. The main piece here is the Track List:
<div id="track-list"
tabindex="0"
role="menu"
aria-expanded="true"
aria-activedescendant="ch1">
https://codepen.io/Motorcykey/pen/qyJrWX
Background:
The idea is that we have a Chapter list of menu-items which can be hidden or shown by clicking a Button. When the list is showing, you will tab from the Chapters button into the list. Once in the list, Tab & Shift+Tab will only scroll through the menu items. Only the 'Esc' key will exit the list.
The Issue:
Without JAWS running this works fine. If a user attempts to hit the 'Up/Down' keys, nothing out of the ordinary occurs.
However, once JAWS is open it was found that if the Up/Down keys were used then a colored highlight box would appear that would read other parts of the page without necessarily focusing them. Originally, this would include the hidden menu-items, but I was able to get rid of this by setting their display to 'none' (as opposed to just setting their opacity to '0').
However, you can still see in this example that if you take the following steps:
Tab to Chapters Button
Hit Space or Enter to hide the menu
Hit the 'Down' Key on the keyboard. The next, "Play/Pause button" should highlight and be read aloud by JAWS screen reader.
Meanwhile, the 'Chapters' button remains 'focused' with the default browser highlight.
My question is around this highlight box and the expected function of Up/Down keys within JAWS. What is the purpose of this highlight box as it seems decoupled from the browser focus. Is there a way to disable it? Do users typically use Up/Down keys, and if so, does this look like the expected behavior or should I be taking more into consideration to avoid confusion around these keys while working on accessibility updates?
Thank you,
-Mikey
an element with role="menu" must be controlled by arrow keys e.g. down arrow key moves focus to the next menu item and up arrow moves to the previous menu item and tab/shift+tab must moves focus to the next/previous page element. the correct implementation example: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
My site has embedded black and white youtube trailers and excerpts from classic movies. How do I hide the youtube red button for playback with my counterfeit one, say black, gray or silver/metallic? Keep in mind that I do not want to remove the red button, just hide it with my fake, so when I click on my fake button, actually I click the red button. The main purpose of not being able to see is to not uglify my site, which is entirely black and white stylistically. ...And, something else very important - if you can avoid the youtube API because it slows down my site. Thank you!!!
Well you can't replace the original button, but there's a workaround.
I have to credit #TomDoodler for this answer.
So:
Hide the player
Get the thumbnail like described here and put it in your page at the same position and size of the player
Put your own play icon over the thumbnail
When your play icon gets clicked, hide the thumbnail and your play icon, show the player and use the YouTube API like in your link to start the video
And here's the fiddle to this
// fiddles have to be accompanied by code, so here's some code
I'm practicing development of a simple iPad Split View app (Stanford's Hegarty online class). And everything works for the most part. However, the Master side ('left side), although working in landscape mode looks a little different than what I expect it to as a 'popover' in portrait mode. The 'popover' covers the left side of the screen including the toolbar button item that triggered it where normally it should not cover that button.
Unfortunately I can't post images so I'll try my best to describe in more detail. Normally the 'proper' popover will be hovering right below the bar item button that triggered it with a thick arrow-ish thingie (the 'anchor') pointing to the button and not covering that button. The popover can be dismissed by clicking on that button again (or elsewhere on the screen).
What's happening to me, however, is that when I click the bar item button to show the popover, the resulting popover 'covers' the button and essentially fills up the left portion of the screen (the detail view is under it and most of it is showing) with its designated width (so, again, it doesn't cover the entire detail view). The is no 'anchor' arrow pointing to the bar item button since it is obviously covering it instead. The popover is dismissed normally once I click anywhere else on the screen.
So why is my popover covering the button and not simply hovering under it with an 'anchor' pointing to it as it should?
I don't think it it makes much sense to post code at this point because I don't think it'll help and more importantly not sure what portion to post considering this might be a problem with how I wired it in the Builder. Any thoughts will be greatly appreciated!
Thanks!
Mo
I believe its a change that came in IOS5.1
If you want the same behaviour you probably need to set the master up as a popover segue, from a toolbar button or similar in the detail view, and set the split view delegate to not show the master in portrait.
I'm on the move now but if you want any more info let me know and I'll try and get back to you later.