We regularly run into this Chrome console accessibility warning implementing Bootstrap Modals. There is supposed to be a fix coming in a future release of Bootstrap, but until then, we want to eliminate the warning. Our solution should be adaptable to other packages and components generating the same warning.

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <button.btn-close>
Ancestor with aria-hidden: <div.modal fade#modal>

I posted a while back about resizing TEXTAREA inputs with jQuery, but haven’t used jQuery for a very long time. Favoring vanilla JS for some time, here is how to do the same thing without a JavaScript library.

<script>
(() => {
    'use strict'
    
    document.querySelectorAll('textarea.h-auto').forEach(textarea => {
        textarea.addEventListener('input', event => {
            const style = window.getComputedStyle(textarea)
            const borders = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
            textarea.style.height = 'auto'
            textarea.style.setProperty('height', `${textarea.scrollHeight + borders}px`, 'important')
        })
        
        textarea.addEventListener('keyup', event => {
            textarea.dispatchEvent(new Event('input'))
        })
        
        textarea.dispatchEvent(new Event('input'))
        
        window.addEventListener('resize', event => {
            textarea.dispatchEvent(new Event('input'))
        })
    })
})()
</script>

Notes

• This covers the window resize event whereas my original jQuery solution did not.
• The borders constant is used instead of adding 2 to scrollHeight because border thickness can vary (increased portability).
• The .h-auto class comes from Bootstrap 5.3, so we use setProperty() to override their CSS rule’s !important priority. You can use style.property = 'value' when priority is not an issue.

While working on a system that uses frequent AJAX requests, and updates document.body.style.cursor before each fetch() and within finally(), I created this wrapper to eliminate repetition…

const originalFetch = fetch;
fetch = (url, options) => {
	document.body.style.cursor = 'progress'
	const promise = originalFetch(url, options).catch(error => {
		console.error(error)
	}).finally(() => {
		document.body.style.cursor = 'auto'
	})
	return promise
}

Usage

fetch(url).then(response => {
	if (response.ok) return response.text()
	throw new Error(`Response status: ${response.status}`)
}).then(text => {
	// do something
})

Before creating the wrapper our fetch() calls looked more like…

document.body.style.cursor = 'progress'

fetch(url).then((response) => {
	if (!response.ok) {
		throw new Error(`Response status: ${response.status}`)
	}
	
	return response.text()
}).then((text) => {
	// do something
}).catch((error) => {
	console.error(error)
}).finally(() => {
	document.body.style.cursor = 'auto'
})

Every… single… place… fetch() was being used 😒

Noticed this post sitting in my drafts… not sure why it was not published it, so here it is (better late than never I guess)

How to make TinyMCE play nice with Bootstrap’s form validation example starter JavaScript when replacing textarea elements.

<script>
tinymce.init({
    selector: '.wysiwyg',
    setup: (editor) => {
        editor.on('blur', () => {
            editor.getElement().value = editor.getContent({ format: 'html' })
        })
    },
})
</script>

That setup was all we needed for .invalid-feedback elements to toggle during form submission without modifying the existing form validation script.

Bonus: Adjust the TinyMCE editor’s border color to correspond with .was-validated 😉

We had to jump through some hoops to get Google reCAPTCHA v3 to work with OpenCart 4.0.2.3 data-oc-toggle="ajax" form attributes. reCAPTCHA implementation is simple and straight-forward, and I really liked the ajax form processor instead of the post/response/redirect flow. I was not aware however that those new ajax forms were going to be a headache while writing a our grecaptcha module.

Other developers opt to populate the challenge response during page load, even though that can easily result in expired challenges, and is discouraged by Google. So we attempted various ways to call grecaptcha.execute() before form submission, but simply could not trigger our listener before other listeners that were added earlier in the DOM.

Saved for future reference in case original source is removed. Code modified slightly, no improvements, personal tastes.

SET @row = 0;
UPDATE `table` SET `id` = @row:= @row + 1;
ALTER TABLE `table` AUTO_INCREMENT = 1;

Used this to reorder rows in a settings table, which doesn’t rely on the auto-increment primary key for uniqueness. I prefer using composite keys in such circumstances, to avoid useless indexes, but the database schema is not mine to redesign.

Open any page containing your gtag.js code and enter one of the following console commands…

gtag('get', window.dataLayer[1][1], 'client_id', function(result) {console.log(result)})

Note: Unmodified gtag.js code snippet presumed. If the above code fails, try replacing window.dataLayer[1][1] with 'YOUR-STREAM-MEASUREMENT-ID' or refer to methods below.

document.cookie.split(';').forEach((element) => { var split = element.split('='); if ('_ga' == split[0].trim()) console.log(split[1].substring(6))})

The Client ID can also be obtained by viewing your browser’s cookies. Look for the cookie named _ga and your client_id will the two long segments of digits including a decimal point (example from mine below).

Example: GA1.1.0000000000.0000000000

Why you might need the Google Analytics Client ID

The client_id is necessary for sending offline events or posting server-side events using Google Analytics’ Measurement Protocol.

Includes standard SSL header check for setting scheme…

$base_url = (isset($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) !== 'off') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) === 'https')) ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . dirname($_SERVER['SCRIPT_NAME']) . '/';

If you don’t need the header checks…

QuickBooks resource management in Windows has always been atrocious. Even if you don’t need an app or service, Intuit loads it, and doesn’t close said ancillary applications and services after you close QuickBooks. The only acceptable reasons are sharing company files over the network, or so an app reopens faster after closing.