When working on a pre-existing fixed-width web design to try to make it responsive, what I find when I narrow the view / screen size during testing is that at some point a horizontal scroll-bar appears, indicating that some element or combination of adjacent elements on the site have a combined width that is higher than the width of the view. I need to identify what that element is so I can figure out what to do about it.
My question is, what is the best way to determine what the widest element(s) are on the page - ie, the reason why it won't narrow any further? Using the browser's built-in inspector tool this is just a guessing game on any long page, and is very inefficient for accomplishing this.
Thanks for any suggestions.
I don't see any special instruments for this, but in my work I use next way:
In the web inspector you choose some html node and apply overflow: hidden for this node, If horizontal scrollbar is hidden, whoa :) So the widest element is in this node, you delete for current node overflow: hidden and choose next node inside current node and again apply overflow: hidden and etc
In my case helped to write "di" to the style of some or another node. After detools popups list "display:" options just scroll for them. Wanted width immediately shows.
Related
I have a responsive layout that must be accessible for screen readers. The issue is around the order of buttons on desktop vs mobile.
On desktop the button order is
Cancel - Remind Me Later - Learn More
...and the screen reader reads left to right. However on mobile the button order is vertically stacked and is ordered as the reverse of the desktop:
Learn more
Remind me later
Cancel
The problem is the screen reader still reads as if user was in desktop mode - the visual order no longer matches.
Is there a way for the screen reader to change the reading order depending on the viewport?
In general, screen reading software ignores CSS (*). The order of your DOM is the order the screen reader will read it. Even if you used tabindex, that will only control the order of tabbing through the interface. If you use CSS to reposition elements, whether through flexbox or grid or float, the screen reading software will ignore that.
A screen reader user can simply walk the DOM (**) by using the up/down arrow keys. (** The user is not really walking the DOM but rather the accessibility tree, but it's similar to the DOM. Not every element in the DOM will be on the accessibility tree, but it's a similar analogy).
So, the only way to "control" the order that a screen reader hears the elements is by modifying the order of the elements in your DOM.
(*) (If you have a :before or :after pseudo-element with a content property, that property will be read by a screen reader as noted in step 2F of the "Accessible Name and Description Computation")
This is a common issue and there are a few solutions you can do. Without knowing much about your codebase, here are a few suggestions for you:
Not knowing how complex your markup is, you could provide a version of the form elements that are only visible on small screens. That way you can explicitly control the accessibility tree structure.
Another option, you can use CSS (flexbox or grid) to reposition the buttons based your media query for small screens.
While this would work, I would not advice using "tabindex="1", "2", "3" "..." to control tab order seeing as how your UI is not rendering in the correct order anyway.
Hope this helps. Good luck with your project.
Is there a way for the screen reader to change the reading order depending on the viewport?
One solution is to have two sets of the same menu and use your media queries to use one or the other
<div class="desktop">Cancel - Remind Me Later - Learn More</div>
<div class="mobile">
Learn more
Remind me later
Cancel
</div>
CSS:
.mobile {display:none}
#media screen and (max-width: 600px) {
.desktop {display:none}
.mobile {display:block}
}
This way, you will be free to let the DOM order match the visual order.
I am using xcode 8.3.3, swift, and XCTest. I am wondering what the best approach to handle scrolling is when you plan to run your tests against multiple simulators and have a list displayed. Since the screen size may change based on the simulator being used, the element you want to select to scroll up on may or may not be displayed.
If I have a list with x # of elements, how do I best approach which element to use to scroll the list up to have the next set of elements displayed on the screen so that the tests will run on multiple simulators of different screen sizes?
When we do "po XCUIApplication()" we see all the elements in the list, so in order to know which one is the last one displayed on the screen, we would have to look through each element and do a checked like isDisplayed or something to find the last element currently displayed ... but I was hoping there is a better approach?
If the element you want to use is displayed when you do po XCUIApplication() then you should just be able to tap() it without having to scroll it into view. The framework will handle the scrolling automatically if it can find the element.
Here is an article I wrote discussing how to use SBTUITestTunnel for scrolling:
https://rlukasik.medium.com/using-sbtuitesttunnel-for-scrolling-in-xcuitests-2e166440ca73
I'm spending some time writing HTML and CSS, and am using the developer tools in Firefox 53. Specifically, the "HTML/DOM/CSS Inspector".
When you move the mouse over a chunk of HTML in the Inspector window, the corresponding rendered HTML element on the page is highlighted. Plus, there are some helpful grid lines and color overlays and whatnot also drawn over the page, all of which was a good decision on the part of the Mozilla developers. It shows how random divs and other elements might be overlapping, is great for showing where margins are collapsing, etc.
However, when I move the mouse off the HTML tree, all that useful highlighting and overlays vanish. Is there a way to get that highlighting/overlay to "stick"? For example, until I click on another HTML element, or reload the page, or... actively take some action other than simply moving my mouse?
Note that right-clicking the Inspector and selecting the ":hover" menu entry is most emphatically not what I'm looking for. I want to change the mouseover behavior of the Inspector, not that of the page.
(Now I'm going to pour another shot of whiskey and resume fighting with the Rules/Computed-versus-"browser styles" controls. Those were... not as well designed.)
The general highlighter can't be toggled to stay on the page, it only reacts on hovering the nodes.
Only some other highlighters are sticky, like the one for elements matching a specific CSS selector or the CSS grid highlighter, both located within the Rules side panel:
The CSS selector matching highlighter is currently (as of Firefox 53) the one that comes nearest to what you're looking for, though it's missing the grid lines.
Furthermore, there is already a request for adding a sticky element highlighter in Mozilla's bug tracker.
I'm trying to figure a lot of hover/mouseover related CSS/Javascript on a webpage.
To do so, I use Firefox+firebug inspectors.
The problem, is that whenever I move the mouse out of an element I'm inspecting, all the "hover reactions" are lost.
Is there a way, to fix the mouse position firefox sees so I can freely use the mouse withouth concern about weiter it actually hovers some elements or not?
Well, it is not fixing the mouse position, but when you right-click on an element in the Inspector in the regular Developer Tools, you're offered a :hover menu item (along some other things). Selecting that will put the element into permanent :hover state. That at least should cover the CSS-part of your question. I'm sure Firebug offers something similar.
For the JS-part, I'd just set a breakpoint somewhere.
Anyone have some code to reorder a ng-repeat using drag and drop that does not require jQuery? (angularjs dependency only)
I've had good results with https://github.com/kamilkp/angular-sortable-view - it's brand new (first commit was last week!), but it's extremely easy to work with. You put an sv-root attribute on the element (probably a div) that's the ancestor of the ng-repeat you want to be able to reorder. Then you put an sv-element attribute on whichever element you're ng-repeating, and drag and drop is handled for you.
You can also optionally put an sv-handle attribute on some element (probably an image, or a Font Awesome icon) inside your ng-repeat, in which case that element gets used as the drag handle. You can also optionally set up "placeholders" (something that shows up as you drag to show where the dragged element will be positioned if you drop it right now) with an sv-placeholder attribute on whatever element is your placeholder. And finally, you can optionally specify an sv-helper attribute on some element to make that element the one that gets dragged. (So if the thing you want the user to see while dragging needs to be different from the thing they see inside the list, that's how you do it).
Oh, and both the sv-placeholder and sv-helper attributes can go either on elements outside the ng-repeat, in which case the same element will be used for every drag situation (use this, for example, if you want a blank gray box as a placeholder the way Trello does it when you drag cards around) -- or those attributes can go on elements inside the ng-repeat, in which case you have access to the local scope of that particular ng-repeat element (use this, for example, if you want your placeholder to be "the text of what I'm dragging around, with opacity 50%, and a dashed border around it").
The demos linked from the https://github.com/kamilkp/angular-sortable-view repo demostrate the usage pretty well, so rather than say more about it I'll just let you poke around in the demos. My personal experience so far has been very favorable.
Oh, and it has no dependencies other than Angular. No jQuery or anything else required.