VoiceOver in Chrome appears to read the opposite state of toggle buttons in AngularJS

I’m working on an AngularJS app and have created a directive for a toggle button. I’m using role="button" and aria-pressed="true|false" to make the element behave like a toggle button. When testing A11y with VoiceOver, the state of the button is spoken correctly when you first tab to it: something like “label text – selected – toggle button” if the toggle is checked, and “label text – toggle button” if it’s unchecked.

The problem is: when you trigger the toggle, the voice feedback is pretty much the opposite of what I want. If it’s an unchecked toggle and you trigger it to check it, the voice speaks “deselect label text toggle button”. If it’s checked and you trigger it to uncheck it, it speaks “select label text toggle button”.

I can’t help thinking this will be confusing to blind users – what the voice is saying about what has just happened is the opposite of what the user actually did.

My template looks like this:

{{toggleOnLabel}} {{toggleOffLabel}}
</div>

The directive code looks like this:

.directive('desktopLockToggle', ['$timeout', function($timeout) {
        return {
            require: '^form',
            restrict: 'E',
            template: *[see above]*,
            scope: {
                toggleOnLabel: '@',
                toggleOffLabel: '@',
                name: '@',
                lockId: '@',
                lockModel: '='
            },
            link: function ($scope, $element, $attrs, form) {
                $scope.form = form;
                $timeout(function() {
                    $element.find('div.desktopLockToggle').attr('aria-pressed', $scope.lockModel.locked);
                }, 0);
            },
            controller: function ($scope, $element, $attrs, $transclude) {
                $scope.toggleMe = function(event) {
                    var $toggle = $(event.currentTarget);
                    var $checkBox = $toggle.find('input');
                    var toggledValue = $scope.lockModel.locked;

                    if (event.target.nodeName.toLowerCase() !== 'input') {
                        toggledValue = $scope.lockModel.locked = !$scope.lockModel.locked;
                    }
                    $toggle.attr('aria-pressed', toggledValue);
                    $checkBox.prop('checked', toggledValue);
                };
            }
        };
    }]);


Source: stackoverflow-javascript