Thanks, Guenni,
The issue is that the buttons in Enfold don’t meet the WCAG standard for keyboard accessibility. We do meet the 4:1 contrast ratio requirement, and we also tested black and white. It’s 21:1, which is extreme. But when reading the page with the keyboard, the button doesn’t change, even though the focus-visible is set to !important in the CSS.

Regards

Dear Mike,

Thank you so much for your quick help and solution suggestion. I wanted to let you know that AXE is actually a free browser extension (available for Chrome) and very easy to install and use. I tested your code after clearing the cache and restarting everything, but unfortunately, AXE still reports the same error (see screenshot at https://restaurant-weichandhof.de/support/axe.png).

Also, this seems to be a global issue. I am currently working on making seven websites accessible, all built with Enfold, and this Scroll-to-Top-Button problem appears across all of them. It would be great to have a solution that I could apply universally or ideally have this fixed directly in the theme itself.

I would also prefer not to use an additional plugin (like WPCode) or keep this code in the functions.php file, as I would lose the changes with the next theme update. Could you perhaps suggest a solution that works via the existing Header Footer Code Manager plugin, or maybe there is another way to solve this via theme settings or CSS/JS?

Thank you so much again for your support!

Best regards,
Diana

For some reason you are not able to see my problem, so I will summarize it again and attach a set of screenshots so you can see exactly what is happening, and can copy the original code and paste it into your own software to see if you get the same result:

1) I design a payment button in Paypal
2) This generates a piece of code and shows me what the final design should look like
3) I click on Copy in the Paypal page to copy the code into temporary memory
4) I open my website and go to the relevant page in my case ‘Events’
5) On that page there are two tabs labelled Visual and Code and a large space beneath.
6) With the Code tab selected I right click and select Paste
7) The code is pasted into the space. I look at the code and it it appears correctly
8) I then click on the Visual tab to check the finished button
9) It doesn’t look right. Instead of one button with a drop list of options, I’m getting a lot of separate buttons.
10) I go back to the code tab and notice that the code has changed – I HAVEN’T DONE ANYTHING AT THIS STAGE, just switched between code and visual tabs. But there are many extra lines that have been added -each item in the drop down list now has an extra <select name=”os0″> and </select> around it . I have messaged WordPress about this, and they tell me that the code tab is part of Enfold and all inputs and outputs to the page are controlled by Enfold, which is why I’m assuming that Enfold is somehow modifying my code.
So, here are the steps visually

So from this I hope you can see that by simply switching between the Code tab and the Visual tab, my code is being changed.and I would like to know why and what I can do to stop this. If you want to try pasting my original code into a test page of your own, then this is the complete chunk of code:

<form action=”https://www.paypal.com/cgi-bin/webscr&#8221; method=”post” target=”_blank”>
<input type=”hidden” name=”cmd” value=”_s-xclick” />
<input type=”hidden” name=”hosted_button_id” value=”H87UB2HDHP3GS” />
<table>
<tr>
<td>
<input type=”hidden” name=”on0″ value=”Options for Brondanw & Nantclwyd only”/>
Options for Brondanw & Nantclwyd only
</td>
</tr>
<tr>
<td>
<select name=”os0″>
<option value=”Member”>
Member £17.00 GBP
</option>
<option value=”Guest”>
Guest £19.00 GBP
</option>
<option value=”2 Members”>
2 Members £34.00 GBP
</option>
<option value=”1 Member + 1 Guest”>
1 Member + 1 Guest £36.00 GBP
</option>
<option value=”Child under 16″>
Child under 16 £10.00 GBP
</option>
</select>
</td>
</tr>
</table>
<input type=”hidden” name=”currency_code” value=”GBP” />
<input type=”image” src=”https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif&#8221; border=”0″ name=”submit” title=”PayPal – The safer, easier way to pay online!” alt=”Add to Cart” />
</form>

Thankyou.

• This reply was modified 1 month, 3 weeks ago by FFAlan.
• This reply was modified 1 month, 3 weeks ago by FFAlan.

Hi. We do not have yet any cache plugin because we are still on a development environment. About Enfold performance settings, the only features enabled by now are:
– lazy load
– Responsive images

I have disabled lazyload and it seems better now. It is still a little bit slow to start and display the first 3 slide and the navigation buttons, however it is better.

Maybe you should consider to optimize this widget in a feauture release.
Regards,
Flavio

Not sure what you mean there. To be clear -I’m generating the code in Paypal. I then copy the code into the code tab on the WordPress page and initially it looks Ok. Then I change to the Visual tab and the button looks wrong. When i flip back to the code tab, extra lines of codes have been added. Word is not involved anywhere.
Here’s a test page -I’ve just pasted in the code from Paypal which should produce a single button with drop down options:

If I then click on the visual tab to see my button it doesn’t look right -I’ve got multiple button instead of a single one:

So I go back to the code tab and notice the code has changed -there are new ?select name=”os0″> lines before each menu choice which I haven’t put there.

• This reply was modified 1 month, 3 weeks ago by FFAlan.

Same issues. Logo still shows left justified on desktop and on mobile view, the logo is over the top button. There must be code that is working against this. Below is my entire code if you can take a look and see whats wrong. I don’t have products either, so not sure why I have all this code.
I just need to fix these things and we are done with the website.
thanks for your help

.product-sales-count {
font-size: 0.8em;
margin-top: 0;
top: -10px;
position: relative;
}

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{text-shadow: 2px 2px 2px #717070;}

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
#top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
text-shadow: 2px 2px #717070;
}

/* TEXT SHADOW FOR – ALL H1 headlines: */
.av-special-heading h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
.av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – subheading text: */
#top .av-subheading p {
text-shadow: 1px 1px #717070;
}

#header_meta a, #header_meta span {
font-size: 16px !important;
line-height: 17px;
}

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
.responsive #top #main {
/* Margin top value should be equal to header height*/
margin-top: 80px;
}
.responsive #top #wrap_all #header {
position: fixed;
}
}

@media only screen and (max-width: 1100px) {
.av-main-nav > li.menu-item { display: none; }
.av-main-nav > li.menu-item-avia-special { display: block; }
}

.phone-info {
font-size: 16px;
}

@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
font-size: 18px !important;
}

.responsive #top .slideshow_caption .avia-caption-content {
font-size: 16px !important;
line-height: 14px;
}

.avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
height: 30vh !important;
}
}

span.avia-menu-text {
text-transform: uppercase;
}

.avia-section.av-minimum-height .container .content {
vertical-align: bottom;
}

.avia-section.av-minimum-height.text-bottom .container .content {
vertical-align: bottom;
}
.avia-section.av-minimum-height.text-top .container .content {
vertical-align: top;
}

.avia-button {
border: 1.5px solid !important;
}

#top .avia-button {
border-radius: 5px !important;
}

@media only screen and (max-width: 767px) {
body, body .avia-tooltip {
font-size: 20px;
}
}

@media only screen and (max-width: 767px) {
.page-id-3230 .avia-builder-el-0.av-minimum-height-100:not(.av-slideshow-section) .container {
height: 767px !important;
}
}

#main .sidebar a,
#footer a,
#socket a {
text-decoration: underline;
}
a.avia-button{
text-decoration:none!important;
}
@media only screen and (max-width: 989px){
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent;
}
.responsive #top #main {
margin-top: 0;
}
}

#top #wrap_all #socket .container {
text-align: center;
}

#top #wrap_all #socket .container {
text-align: center;
}

#top #wrap_all #socket .copyright {
display: block;
float: none;
clear: both;
text-align: center;
}

#top .content .flex_column .widget_nav_menu li {
border-top-width: 0;
border-bottom-width: 0;
}

#footer h3.widgettitle{
border:none!important;
}

@media only screen and (max-width: 769px) {
.flex_column.av-l3szqp26-162f9236fd15346c9c727f5f94b66dce {
min-height: 50vh !important;
}
}

.html_elegant-blog #top .post-entry .post-meta-infos,
.html_elegant-blog .avia-content-slider .slide-meta,
#top .news-time {
display: none;
}

html, body {
background-color: #fff !important;
}

#header:not(.av_header_transparency) #header_main {
-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
}

#top.single-product .product_meta {
visibility: hidden;
}

.is-large.wc-block-cart .wc-block-cart-items th span {
font-size: 2em;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
font-size: 2em;
}

.wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input.is-active label {
display: none;
}

#top div ul.product_list_widget li a {
display: block;
font-weight: bold;
font-size: 1.5em;
line-height: 1.6em !important;
}

#top .dropdown_widget ul.product_list_widget li .quantity {
color: #000000;
font-size: 1em;
}

#top .dropdown_widget .total span.woocommerce-Price-currencySymbol, #top .dropdown_widget .total {
color: #000000;
font-size: 1em;
}

div .product-sorting {
display: none;
}

@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top: 88px !important;
}
.responsive.html_header_transparency #top #main {
padding-top: 0 !important;
}
}

.page-id-432 .components-flex-item input, .page-id-433 .wc-block-components-text-input input {
padding: 8px 116px;
}

.wc-block-cart__submit-container a .wc-block-components-button__text {
color: #fff;
}

.wc-block-components-address-form-wrapper .components-base-control__label {
top: -50px;
}

.wc-block-components-address-form-wrapper .components-base-control__label {
top: -30px !important;
}

#top .av-product-class-minimal img {
border-radius: 30px !important;
}
#top .av-product-class-minimal img {
border-radius: 30px !important;
}

.select2-container–default .select2-results__option–highlighted[aria-selected], .select2-container–default .select2-results__option–highlighted[data-selected], #top .select2-results {
color: #000 !important;
}

@media only screen and (max-width: 768px) {

/* Add your Mobile Styles here */
#top #bc-custom-section div .flex_column {
width: 46% !important;
margin-left: 3% !important;
border-radius: 30px;
}
}

#top #bc-custom-section div .flex_column img {
border-radius: 30px;
}

.woocommerce-Tabs-panel ul {
list-style: disc;
margin-left: 15px;
}

.woocommerce-Tabs-panel ul, .woocommerce-product-details__short-description ul {
list-style: disc;
margin-left: 15px;
}

#menu-item-150 > a > .avia-menu-text {
color: #f19809!important;
}

#av-burger-menu-ul .menu-item-150 > a > .avia-menu-text {
color:#f19809!important;
}

#menu-item-2076 > a > .avia-menu-text {
color: #f19809!important;
}

#av-burger-menu-ul .menu-item-2076 > a > .avia-menu-text {
color:#f19809!important;
}

.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
border-radius: 30px;
}

#footer .textwidget .menu-blissfull-main-menu-container p {
margin: 0;
width: auto;
display: inline-block;
}

@media only screen and (max-width: 767px) {
.responsive .home #wrap_all #av-section-shop-category .flex_column {
width: 48%;
padding: 1%;
}
}

ul.a-unordered-list.a-vertical.a-spacing-mini li {
margin-bottom: 20px;
}

#top .price, #top .price span, #top del, #top ins {
display: inline;
text-decoration: none;
font-size: 24px;
line-height: 24px;
font-weight: 600;
}

.page-id-389 .shop_columns_3 .products .product {
width: 100%;
}

.page-id-91 .shop_columns_3 .products .product {
width: 100%;
}

h1{
text-transform: capitalize !important;
}

.template-page .entry-content-wrapper h1{
text-transform: capitalize !important;
}

a.cart_dropdown_link {
font-size: 28px !important;
}

#top a.cart_dropdown_link span[data-av_icon] {
font-size: 28px;
color: var(–enfold-header-color-color);
}

#top #header .av-main-nav #menu-item-wc-account-icon > a {
color: #f19809;
font-size: 28px;
}

/* Increase base font size on mobile devices */
@media only screen and (max-width: 767px) {
body,
p,
.entry-content {
font-size: 18px !important;
line-height: 1.6 !important;
}
}

@media only screen and (max-width: 767px) {
#top .av-special-heading .av-subheading p {
font-size: 24px
}
}

img[src*=”amazon-adsystem”] {
display: none;
}

#top .av-burger-overlay-bg {
opacity: 0.8;
background: #000;
}

——————–

div .logo {
left: 37%;
}
div.av-burger-overlay-bg {
background-color: rgba(0, 0, 0, .7);
}

#top .av-burger-overlay-bg {
opacity: 0.8;
background: #000;
}

#top .av-main-nav-wrap {
float: right;
position: relative;
z-index: 3;
padding: 0 !important;
margin: 0 0 0 15px !important;
}

.header_color.av_header_transparency .av-hamburger-inner,
.header_color.av_header_transparency .av-hamburger-inner::before,
.header_color.av_header_transparency .av-hamburger-inner::after {
background-color: #FFF !important;
}

#top .av_header_transparency .phone-info,
#top .av_header_transparency .social_bookmarks li a {
color: #FFF !important;
}

#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
border: none !important;
}

#top .main_menu {
width: 170px
}

#top .logo {
/*width: calc(100% – 170px);*/
width: 100%;
left: unset;
}

@media only screen and (max-width: 767px) {
#av_section_1 .container.av-section-cont-open,
.page-id-910 #av-layout-grid-1 {
padding-top: 130px !important;
}
}

#top .logo img {
left: 50%;
transform: translateX(-50%)
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
position: fixed;
}
}

@media only screen and (max-width: 767px) {
#header .social_bookmarks {
display: none !important;
}
}

#top #wrap_all #av-burger-menu-ul li {
font-size: 30px !important;
}

——————-

#av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
color: blue;
}
#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
color: #f5c526;
font-size: 20px;
line-height: 20px;
}
.html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
color: #f5c526;
font-size: 20px;
}
#top #wrap_all #av-burger-menu-ul .menu-item-2846 {
font-size: 24px !important;
}

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
line-height: 20px;
}

• This reply was modified 1 month, 3 weeks ago by bemodesign.